/* ============================================================================
   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.
   ============================================================================ */

/* JetBrains Mono stays on the Google CDN (it was already there and the mono face
   is unchanged). Jost does NOT: it is self-hosted below so the geometric display
   face renders off our own origin, with no third-party request at page load. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Jost — SIL OFL, latin subset, VARIABLE 400-800 in one 26KB file.
   The Futura-alike that non-macOS users fall through to. font-display:swap so a
   cold load paints text immediately rather than waiting on the font. */
@font-face{
  font-family:'Jost';
  src:url('/fonts/jost-var.woff2') format('woff2-variations'),
      url('/fonts/jost-var.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---------------------------- COLOR ------------------------------------- */
    /* GOLD / RED / BLACK. These values are the SAME OKLCH as public/v2.css, on purpose:
       theme.css dresses the 99 legacy pages and v2.css dresses /crm, and if the two drift
       the app reads as two products stitched together. Change them together or not at all.
       Red stays destructive-only and green stays positive-state-only, same rules as /crm. */
  /* 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:oklch(13% 0.008 60);
  --c-bg-card:oklch(18% 0.010 62);
  --c-bg-card-2:oklch(21% 0.011 62);
  --c-bg-input:oklch(11% 0.007 60);

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

  /* text — bone scale */
  --c-text:oklch(95% 0.012 85);
  --c-text-dim:oklch(78% 0.014 84);
  --c-text-faint:oklch(60% 0.013 83);

  /* 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:oklch(80% 0.125 88);            /* Kumquat orange — warm deep citrus, not the old neon */
  --c-accent-soft:oklch(68% 0.105 86);       /* 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 */

  /* ---- channel + data hues (from the "BullpenLM — App" design artifact) -----
     Signal only, same rule as the semantic block above. --c-blue/--c-purple are
     for DATA (chart series, a second category), never decoration. --c-wa/--c-tg
     are the two messaging channels' own brand colors, which is the one place a
     non-house hue is correct: a WhatsApp button that is not WhatsApp green reads
     as a different product. Deliberately warm-desaturated to sit next to brass. */
  --c-blue:#6E8FB0;
  --c-blue-wash:color-mix(in srgb, var(--c-blue) 15%, transparent);
  --c-purple:#A98BC7;
  --c-purple-wash:color-mix(in srgb, var(--c-purple) 15%, transparent);
  --c-wa:#25D366;                /* WhatsApp brand */
  --c-tg:#3AA9EA;                /* Telegram brand */
  /* good/warn/bad washes already exist above — not redefined here. */

  /* ---- the fourth ink step + the strong hairline ---------------------------
     The artifact works in a 4-step ink ramp and a 2-step edge ramp; the house
     had 3 and 2. This adds the missing quietest ink so a mono eyebrow can sit
     BELOW --c-text-faint without inventing a hex. */
  --c-text-ghost:color-mix(in srgb, var(--c-text) 32%, var(--c-bg));
  --c-border-strong:color-mix(in srgb, var(--c-text) 16%, transparent);

  /* ---------------------------- TYPE --------------------------------------
     Set to match the "BullpenLM — App" design artifact (Dylan's call, made with
     the trade-off below in front of him).

     THE TRADE-OFF, AND HOW IT IS SOLVED: Futura and Avenir Next ship on macOS
     and essentially nowhere else. On Windows and Android the artifact's own
     stack falls through to Century Gothic and then system-ui, so the app would
     NOT look like the artifact for a big share of users. Jost is a geometric
     sans built as a Futura-alike, SIL OFL, and it is SELF-HOSTED from
     /fonts/jost-var.woff2 below. So: Mac gets the real faces, everyone else gets
     Jost, and nobody gets a fallback that breaks the design. No font CDN at
     runtime, which also keeps us on one backend.

     Jost is a VARIABLE font: one 26KB file covers 400 through 800, which is why
     there is a single @font-face with a weight RANGE rather than five files. */
  --font-display:"Futura","Avenir Next","Jost",system-ui,sans-serif;  /* headings · big numbers */
  --font-body:"Avenir Next","Jost","SF Pro Text",system-ui,sans-serif; /* reading copy — DEFAULT body */
  --font-ui:"Avenir Next","Jost",system-ui,sans-serif;                 /* dense UI / form inputs */
  --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:oklch(80% 0.125 88);        /* same brand orange */
  --c-accent-soft:oklch(68% 0.105 86);   /* 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 */

/* ============================================================================
   OPERATOR LIGHT MODE  —  from the "BullpenLM — App" design artifact
   ----------------------------------------------------------------------------
   The artifact ships a full light set and drives it from BOTH prefers-color-scheme
   AND [data-theme]. Only [data-theme] is wired unconditionally here, on purpose.

   WHY NOT prefers-color-scheme YET: ~92 operator pages predate this and hardcode
   dark assumptions in their own <style> blocks (near-black fills, light-on-dark
   shadows, rgba scrims). Honoring the OS preference today would flip every one of
   them to a half-light state for any operator whose Mac is in light mode, and it
   would look broken rather than themed. So the media query is scoped to an
   explicit opt-in until pages are audited.

   TO TURN IT ON once pages are verified: delete the [data-theme="auto"] scope on
   the @media block below. Nothing else changes.
   ============================================================================ */
:root[data-theme="light"]{
  color-scheme:light;
  --c-bg:#F3F0E8;
  --c-bg-card:#FFFFFF;
  --c-bg-card-2:#FAF7F0;
  --c-bg-input:#ECE7DB;
  --c-border:color-mix(in srgb, #1E1408 20%, transparent);
  --c-border-soft:color-mix(in srgb, #1E1408 10%, transparent);
  --c-text:#1B160E;
  --c-text-dim:#5E5442;
  --c-text-faint:#948A75;
  /* The accent DARKENS in light mode. #E8742A on white fails contrast for text;
     this is the same hue carried to a legible weight, not a different brand. */
  --c-accent:#C8571A;
  --c-accent-soft:#A6470F;
  --c-on-accent:#FFF8F0;
  --c-good:#0E9E63;
  --c-warn:#B47A10;
  --c-bad:#DA283C;
  --c-blue:#3763CC;
  --c-purple:#8046D4;
}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    color-scheme:light;
    --c-bg:#F3F0E8; --c-bg-card:#FFFFFF; --c-bg-card-2:#FAF7F0; --c-bg-input:#ECE7DB;
    --c-border:color-mix(in srgb, #1E1408 20%, transparent);
    --c-border-soft:color-mix(in srgb, #1E1408 10%, transparent);
    --c-text:#1B160E; --c-text-dim:#5E5442; --c-text-faint:#948A75;
    --c-accent:#C8571A; --c-accent-soft:#A6470F; --c-on-accent:#FFF8F0;
    --c-good:#0E9E63; --c-warn:#B47A10; --c-bad:#DA283C;
    --c-blue:#3763CC; --c-purple:#8046D4;
  }
}

/* ============================================================================
   LIQUID GLASS  —  the artifact's panel treatment, as ONE opt-in utility
   ----------------------------------------------------------------------------
   .glass is additive: a page opts a surface in without giving up its own layout.
   Three parts, and all three matter or it reads as a flat translucent box:
     1. a color-mix translucent fill so the ambient field below shows through
     2. backdrop-filter blur + saturate, which is what makes it read as GLASS
        rather than as opacity
     3. an inset top highlight — the 1px bright edge where light catches a pane
   ============================================================================ */
:root{
  --glass-fill:color-mix(in srgb, var(--c-bg-card) 72%, transparent);
  --glass-fill-2:color-mix(in srgb, var(--c-bg-card-2) 76%, transparent);
  --glass-blur:blur(24px) saturate(1.35);
  --glass-r:16px;
}
.glass{
  position:relative;
  background:var(--glass-fill);
  border:1px solid var(--c-border-soft);
  border-radius:var(--glass-r);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--c-text) 9%, transparent),
             0 18px 40px -28px rgba(0,0,0,.8);
}
.glass-2{background:var(--glass-fill-2)}
/* Hover lift. Transform only (no layout properties) so it stays on the compositor. */
.glass-lift{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.glass-lift:hover{
  transform:translateY(-2px);
  border-color:var(--c-border);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--c-text) 13%, transparent),
             0 26px 50px -28px rgba(0,0,0,.9);
}
/* The artifact's view-enter rise. */
@keyframes q-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rise{animation:q-rise .34s cubic-bezier(.22,.68,.36,1) both}

/* ============================================================================
   AMBIENT FIELD  —  the artifact's drifting 3-color radial wash
   ----------------------------------------------------------------------------
   The artifact paints this on body::before with NO markup, which is strictly
   better than game-layer.css's .aurora because it needs no per-page divs, so it
   reaches all ~92 pages from this one file.

   The :has() guard is the whole point: pages that ALREADY carry the .aurora
   markup keep their existing treatment and do not get a second wash stacked
   under it. Browsers without :has() simply keep the old aurora behavior.
   ============================================================================ */
body::before{
  content:"";
  position:fixed;
  inset:-10%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(46vw 46vw at 12% -6%,  color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 62%),
    radial-gradient(40vw 40vw at 92% 12%,  color-mix(in srgb, var(--c-bad)    11%, transparent), transparent 60%),
    radial-gradient(38vw 38vw at 44% 108%, color-mix(in srgb, var(--c-warn)   10%, transparent), transparent 64%);
  filter:blur(12px) saturate(1.05);
  animation:q-amb 44s ease-in-out infinite;
}
body:has(.aurora)::before{display:none}
@keyframes q-amb{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(2.5vw,2vh,0) scale(1.07)}
}
/* Motion is decoration here, so it is the first thing to go. */
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
  .rise{animation:none}
  .glass-lift{transition:none}
  .glass-lift:hover{transform:none}
}