/* ============================================================================
   theme.css — Kumquat "field-manual" design system · SINGLE SOURCE OF TRUTH
   ----------------------------------------------------------------------------
   Every page links this file: <link rel="stylesheet" href="/theme.css" />
   then references the tokens below — never a hardcoded color/font/hex.

   A rebrand (or a future light theme / alt-brand) = change the values in this
   :root block ONLY. Because the alpha tints below are derived with color-mix()
   from the base tokens, editing one base var cascades to every tint + scrim.

   Token namespace:
     --c-*      color      --font-*   type
     --radius*  geometry   --border-w line weight   --maxw-* measure
   Values = Dylan's documented canonical (warm near-black #0A0B0C + bone + brass).
   The ONLY warm accent is brass #C9A24C. No legacy lead-gen hues live here.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Black&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ---------------------------- COLOR ------------------------------------- */
  /* Canonical values = Dylan's documented standard (warm near-black #0A0B0C +
     bone/paper text + ONE brass accent). The whole app converges on these. */
  /* surfaces — warm near-black → raised card → second raise → input well.
     Lifted a notch from #0A0B0C per Dylan (legible, not murky); still warm + cinematic. */
  --c-bg:#131210;
  --c-bg-card:#1B1A17;
  --c-bg-card-2:#22211D;
  --c-bg-input:#0A0908;

  /* hairlines */
  --c-border:#2c2d30;            /* default / emphasis borders */
  --c-border-soft:#232427;       /* subtle hairlines */

  /* text — bone scale */
  --c-text:#E9E5DB;
  --c-text-dim:#9b968b;
  --c-text-faint:#6b665d;

  /* brand accent — the ONE accent, SEMANTIC + per-product swappable.
     Kumquat = clean citrus orange (Dylan's call); a personal-brand theme would set brass.
     Reskinning the accent = these 3 lines only. Tune the shade warmer/deeper here. */
  --c-accent:#E8742A;            /* Kumquat orange — warm deep citrus, not the old neon */
  --c-accent-soft:#F0904A;       /* a touch lighter — hover / secondary accent */
  --c-on-accent:#1A1206;         /* near-black text/icon sitting on an accent fill */

  /* semantic status — signal only, never decorative */
  --c-good:#74BE7A;              /* success · done · verified · on-track */
  --c-warn:#D8A53C;              /* caution · pending · gold */
  --c-bad:#D2685B;              /* error · behind · red */
  --c-slate:#6B7686;            /* neutral / inert status */

  /* ---- dialer status palette — 5-color disposition scheme (callbook). Color-KEYED so the
     leader-editable MEANINGS live in org_settings (white/red/orange/blue/green stay stable
     while a leader remaps which disposition is which). Tuned to the dark field-manual bg +
     mutually distinct at 9px dot scale; green/red reuse the semantic tokens. ---- */
  --status-white:#CDC7B8;       /* untouched · not called / no answer (warm bone, not glaring pure white) */
  --status-red:#D2685B;         /* disqualified · not interested (= --c-bad) */
  --status-orange:#DD9233;      /* "Difficult" · amber — deliberately distinct from the brand citrus accent */
  --status-blue:#6E8FB0;        /* appointment set · dusty steel-blue (warm-desaturated, never neon/AI-cyan) */
  --status-green:#74BE7A;       /* sold (= --c-good) */
  --status-pink:#C77F9E;        /* callback · dusty rose — cool, kept distinct from the warm red */
  --status-amber:#D6B340;       /* follow-up · gold-yellow — yellower than the orange so the two warm states separate */
  --status-white-wash:color-mix(in srgb, var(--status-white) 13%, transparent);
  --status-red-wash:color-mix(in srgb, var(--status-red) 14%, transparent);
  --status-orange-wash:color-mix(in srgb, var(--status-orange) 15%, transparent);
  --status-blue-wash:color-mix(in srgb, var(--status-blue) 16%, transparent);
  --status-green-wash:color-mix(in srgb, var(--status-green) 14%, transparent);
  --status-pink-wash:color-mix(in srgb, var(--status-pink) 15%, transparent);
  --status-amber-wash:color-mix(in srgb, var(--status-amber) 15%, transparent);

  /* derived tints — change a base token above and these follow automatically */
  --c-good-wash:color-mix(in srgb, var(--c-good) 14%, transparent);
  --c-warn-wash:color-mix(in srgb, var(--c-warn) 12%, transparent);
  --c-bad-wash:color-mix(in srgb, var(--c-bad) 15%, transparent);
  --c-accent-wash:color-mix(in srgb, var(--c-accent) 10%, transparent);
  --c-scrim:color-mix(in srgb, var(--c-accent) 7%, transparent);   /* ambient page glow */

  /* ---------------------------- TYPE -------------------------------------- */
  --font-display:"Archivo Black","Archivo",system-ui,sans-serif;  /* headings · big numbers */
  --font-body:"Spectral",Georgia,serif;                           /* reading copy — DEFAULT body */
  --font-ui:"Archivo",system-ui,sans-serif;                       /* dense UI / form inputs where serif is too heavy */
  --font-mono:"JetBrains Mono",ui-monospace,monospace;            /* labels · eyebrows · buttons · data */

  /* ------------------------- PRIMITIVES ----------------------------------- */
  --radius:6px;
  --radius-sm:4px;
  --radius-pill:999px;
  --border-w:1px;
  --maxw-read:640px;            /* content / onboarding column */
  --maxw-wide:1040px;          /* dashboard / ladder column */
}

/* ----------------------- universal base -----------------------------------
   Minimal + non-opinionated. A page that links theme.css is Spectral-on-near-
   black by default; pages add only their own layout on top. Safe to keep a
   page's own reset too — these are idempotent. */
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
::selection{background:var(--c-accent);color:var(--c-on-accent)}
a{color:inherit;text-decoration:none}

/* ============================================================================
   CONSUMER LIGHT THEME — for client/prospect-facing pages (landers, quote,
   secure-intake). Same --c-* token NAMES, light + warm values, SAME brand
   accent (#E8742A). Add class="theme-consumer" to <html> (or <body>) and the
   page reskins to a clean, trustworthy light surface automatically. NO game-layer
   (no aurora/quest/XP) on these — "gamey where you play, clean where you transact."
   Type ramp for consumer: headings var(--font-ui) Archivo (NOT Archivo Black),
   body var(--font-body) Spectral; skip mono labels (reads too techy for trust).
   ============================================================================ */
.theme-consumer{
  --c-bg:#FBF7F0;            /* warm paper */
  --c-bg-card:#FFFFFF;
  --c-bg-card-2:#F5EFE4;
  --c-bg-input:#FFFFFF;
  --c-border:rgba(31,26,20,.14);
  --c-border-soft:rgba(31,26,20,.08);
  --c-text:#1F1A14;          /* warm near-black ink */
  --c-text-dim:#6B6258;
  --c-text-faint:#9A9186;
  --c-accent:#E8742A;        /* same brand orange */
  --c-accent-soft:#CF631C;   /* deeper on light for legible accent text/links */
  --c-on-accent:#1A1206;     /* near-black on the orange fill — far more legible than white on #E8742A */
  --c-good:#2E9E55; --c-warn:#B97E16; --c-bad:#C8472E; --c-slate:#6B7686;
  --c-good-wash:color-mix(in srgb, var(--c-good) 12%, transparent);
  --c-warn-wash:color-mix(in srgb, var(--c-warn) 12%, transparent);
  --c-bad-wash:color-mix(in srgb, var(--c-bad) 12%, transparent);
  --c-accent-wash:color-mix(in srgb, var(--c-accent) 10%, transparent);
  --c-scrim:color-mix(in srgb, var(--c-accent) 5%, transparent);
  background:var(--c-bg);color:var(--c-text);
}
/* shared consumer primitives — reuse so all consumer pages read as one brand */
.theme-consumer .c-btn{display:inline-flex;align-items:center;gap:8px;background:var(--c-accent);color:var(--c-on-accent);font-family:var(--font-ui);font-weight:700;font-size:15px;border:0;border-radius:10px;padding:13px 24px;cursor:pointer;text-decoration:none;box-shadow:0 10px 24px -12px var(--c-accent);transition:transform .2s,box-shadow .2s}
.theme-consumer .c-btn:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px var(--c-accent)}
.theme-consumer .c-btn.ghost{background:transparent;color:var(--c-accent-soft);border:1px solid var(--c-accent);box-shadow:none}
.theme-consumer .c-card{background:var(--c-bg-card);border:1px solid var(--c-border);border-radius:14px;padding:24px;box-shadow:0 1px 2px rgba(31,26,20,.04),0 12px 30px -20px rgba(31,26,20,.18)}
.theme-consumer h1,.theme-consumer h2,.theme-consumer h3{font-family:var(--font-ui);font-weight:700;letter-spacing:-.01em;color:var(--c-text)}
.theme-consumer .eyebrow{font-family:var(--font-ui);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent-soft)}
/* form primitives — for the trust-sensitive transact pages (quote / secure-intake) */
.theme-consumer .c-field{margin-bottom:16px}
.theme-consumer .c-label{display:block;font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--c-text-dim);margin-bottom:6px}
.theme-consumer .c-input,.theme-consumer .c-field input,.theme-consumer .c-field select,.theme-consumer .c-field textarea{width:100%;background:var(--c-bg-card);border:1px solid var(--c-border);border-radius:10px;padding:12px 14px;font-size:16px;font-family:var(--font-ui);color:var(--c-text)}  /* 16px: prevents iOS auto-zoom on focus */
.theme-consumer .c-input:focus,.theme-consumer .c-field input:focus,.theme-consumer .c-field select:focus,.theme-consumer .c-field textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent) 16%,transparent)}
.theme-consumer .c-input::placeholder,.theme-consumer .c-field input::placeholder{color:var(--c-text-faint)}
.theme-consumer .c-note{font-family:var(--font-ui);font-size:12.5px;color:var(--c-text-faint);line-height:1.5}  /* fine print / trust copy */
.theme-consumer .c-secure{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-weight:600;font-size:12px;color:var(--c-good)}  /* "🔒 secure / encrypted" reassurance */