/* ============================================================================
   KAVITA SINGH — HOUSE STYLE  (the "Task Tracker" standard)
   Quiet-luxury / divine: typography-first, gold-on-near-black, no buttony chips.
   Canonical source: ~/house-style/house-style.css
   Extracted from the Task Tracker design system, 2026-06-13.

   USE IT THREE WAYS
   1) Flask app (private console): copy this file into the app's static/ folder and
        <link rel="stylesheet" href="/static/house-style.css">
      then add the font <link> (see FONTS below) in <head>.
   2) Static page (Cloudflare): drop this file beside index.html in the deploy
      folder and <link rel="stylesheet" href="house-style.css"> + the font <link>.
   3) Email: DO NOT link this file. Use ~/house-style/email.html inline styles
      (mail clients strip <style>/web fonts; that file uses inline + Georgia serif).

   FONTS — add this to <head> once per page (the type system depends on it):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
   ============================================================================ */

:root {
  --bg:         #0f0e17;   /* near-black page */
  --panel:      #1a1924;   /* card surface */
  --panel-2:    #232231;   /* raised surface / inputs / ghost buttons */
  --deep:       #0b0a12;   /* header bar / deepest */
  --text:       #e8e6f0;   /* body text */
  --muted:      #8a87a3;   /* secondary text */
  --accent:     #c9a96e;   /* gold */
  --accent-lt:  #d4b87a;   /* gold hover */
  --accent-dim: #6b5d3f;   /* dim gold (borders, hover hints) */
  --on-accent:  #1a1310;   /* ink on gold fills */
  --silver:     #c8c8d4;
  --purple:     #9d8fb8;   /* muted purple — section labels */
  --error:      #ff6b6b;
  --border:     #2d2c3d;
  --done:       #4f4d62;

  --font-display: "Cinzel", serif;                       /* headings, wordmark */
  --font-body:    "Cormorant Garamond", Georgia, serif;  /* prose, inputs */
  --font-mono:    "DM Mono", ui-monospace, monospace;    /* labels, buttons, data */

  --radius:     10px;
  --radius-sm:  6px;
  --maxw:       860px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   LEGIBILITY STANDARD (Kavita rule 2026-06-15: "grandma needs to read this -
   I have clients who are 70"). Anything a CLIENT reads must be comfortable for
   older eyes. Use .reading for client-facing reading content (emails, PDFs,
   result/letter screens). Her own back-of-house dashboards may stay at 16-18px.
     - reading body: 21px / 1.7   - labels: >=13px   - footnotes: >=12px
   ============================================================================ */
.reading        { font-size: 21px; line-height: 1.7; color: var(--text); }
.reading p      { margin: 0 0 16px; }
.reading-intro  { font-size: 19px; line-height: 1.6; }
.reading-label  { font-family: var(--font-mono); font-size: 13px; letter-spacing: .22em;
                  text-transform: uppercase; }
.reading-fine   { font-size: 12px; line-height: 1.6; }   /* compliance/legal only */

.hs-wrap { max-width: var(--maxw); margin: 0 auto; padding: 32px 24px 64px; }

/* ---- Headings / wordmark ---- */
h1, .hs-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
  font-size: 26px;
}
h2, .hs-h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.08em; color: var(--text); font-size: 21px; }

/* small uppercase mono section label (the "phase label" look) */
.hs-label {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--purple);
  margin: 22px 0 12px; display: flex; align-items: center; gap: 14px;
}
.hs-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* tiny mono meta line */
.hs-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }

/* ---- Cards / panels ---- */
.hs-card, .panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color 0.15s;
}
.hs-card:hover { border-color: var(--accent-dim); }

/* ---- Buttons ---- */
button, .btn {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.15s;
}
button:hover, .btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.btn-primary, button.primary {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 500;
}
.btn-primary:hover, button.primary:hover { background: var(--accent-lt); color: var(--on-accent); border-color: var(--accent-lt); }
.btn-ghost { background: transparent; }

/* ---- Inputs ---- */
input[type=text], input[type=email], input:not([type]), textarea, select {
  font-family: var(--font-body);
  font-size: 17px;
  width: 100%;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color 0.15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
::placeholder { color: var(--muted); opacity: 1; }
label, .hs-field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 7px;
}

/* ---- Status notes ---- */
.hs-note   { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.hs-error  { color: var(--error); }
.hs-ok     { color: var(--accent); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lt); text-decoration: underline; }
