/* WiseCall web tokens. Single source for color, type, stroke, radius and motion.
   Restyle = edit this file (and tokens.json). Assets read these via var() with hex fallbacks,
   and icons use currentColor. Palette: Evergreen (current site direction, not final). */
:root{
  /* Color: brand */
  --wc-evergreen:#163C30;  /* primary: headings on light, dark sections, nodes */
  --wc-fern:#2F6B55;       /* secondary: lines, arcs, waveform, lit dots */
  --wc-mist:#DDE8DC;       /* tint: chips, bands, tracks, dot grid */
  --wc-paper:#F7F4EC;      /* background */
  --wc-saffron:#F2B33D;    /* accent: Live Dot, CTA, highlights (never as text on Paper) */
  --wc-ink:#121815;        /* text */
  /* Color: support (derived; adjust with the palette) */
  --wc-white:#FFFFFF;
  --wc-muted:#55605A;      /* secondary text on Paper (AA on Paper) */
  --wc-idle:#9AA39E;       /* unlit / waiting states (always paired with a dashed outline or label) */
  --wc-line:#E4DED0;       /* hairlines on Paper */
  --wc-on-dark:#F7F4EC;    /* text on Evergreen */
  --wc-on-dark-muted:#B9CDBF;

  /* Type */
  --wc-font-display:'Fraunces', Georgia, serif;
  --wc-font-ui:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wc-weight-display:600; --wc-weight-ui:500; --wc-weight-strong:600;

  /* Icons & line art */
  --wc-icon-size:24px;     /* drawn on a 24 grid; display at 24 or 32 */
  --wc-icon-stroke:1.5;    /* unitless SVG stroke width at 24px */
  --wc-art-stroke:2;       /* diagram connector lines (C2, C6, C7) */
  --wc-radius-s:8px; --wc-radius-m:14px; --wc-radius-l:20px; --wc-radius-pill:999px;

  /* Dot grid */
  --wc-grid-pitch:24px; --wc-grid-dot:1.25px;

  /* Motion (from website-motion-asset-brief.md section 3) */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --ease-ui:cubic-bezier(0.25,0.46,0.45,0.94);
  --dur-ui:160ms; --dur-s:240ms; --dur-m:480ms; --dur-l:900ms;
  --stagger:60ms; --rise:16px;
  --wc-live-cycle:3200ms;  /* Live Dot ripple period */
}

/* ---- Site layer: exactly as used on https://wisecall.ai/ (checked 4 Nov 2026) ---- */
:root{
  --evergreen:var(--wc-evergreen);
  --evergreen-deep:color-mix(in srgb, var(--wc-evergreen) 78%, black);   /* hover on Evergreen buttons */
  --fern:var(--wc-fern);
  --mist:var(--wc-mist);
  --paper:var(--wc-paper);
  --saffron:var(--wc-saffron);
  --saffron-deep:color-mix(in srgb, var(--wc-saffron) 82%, var(--wc-ink)); /* hover on Saffron buttons */
  --ink:var(--wc-ink);
  --ink-soft:var(--wc-muted);
  --surface:color-mix(in srgb, var(--wc-white) 70%, var(--wc-paper));      /* cards on Paper */
  --line:var(--wc-line);
  --line-strong:color-mix(in srgb, var(--wc-evergreen) 28%, transparent);
  --shadow:0 24px 50px color-mix(in srgb, var(--wc-ink) 8%, transparent);
  --font-display:"Fraunces", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --font-body:"Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --header-h:76px; --content:1120px; --radius:18px;
  color-scheme:light;   /* the live site has no dark mode; the generated block below adds the proposed one */
}

/* ==== GENERATED by tokens/src/build_tokens.py: semantic, status and dark-mode tokens ====
   PROPOSAL pending Go's final palette pick. Edit build_tokens.py, not this block.
   Use --color-* in app components; brand --wc-* tokens stay the same in both themes.
   Light: default, or any element with data-theme="light". Dark: data-theme="dark" on <html> (or any subtree),
   or the OS setting when no data-theme is set. */
:root,[data-theme="light"]{
  color-scheme:light;
  --color-bg:#F7F4EC;
  --color-surface:#FDFCF9;
  --color-surface-raised:#FFFFFF;
  --color-surface-tint:#DDE8DC;
  --color-surface-strong:#163C30;
  --color-on-strong:#F7F4EC;
  --color-on-strong-muted:#B9CDBF;
  --color-text:#121815;
  --color-text-muted:#55605A;
  --color-heading:#163C30;
  --color-link:#163C30;
  --color-link-hover:#2F6B55;
  --color-eyebrow:#2F6B55;
  --color-accent:#F2B33D;
  --color-accent-hover:#CA9736;
  --color-on-accent:#121815;
  --color-selected-bg:#163C30;
  --color-selected-text:#F7F4EC;
  --color-chip-bg:#DDE8DC;
  --color-chip-text:#163C30;
  --color-line:#E4DED0;
  --color-line-strong:rgb(22 60 48 / .28);
  --color-focus:#2F6B55;
  --color-idle:#9AA39E;
  --color-dotgrid:#DDE8DC;
  --color-logo-ring:#2F6B55;
  --color-logo-dot:#F2B33D;
  --color-logo-word:#163C30;
  --color-shadow:0 24px 50px rgb(18 24 21 / .08);
  --color-success-fg:#1E6B3E;
  --color-success-bg:#E2F0E1;
  --color-success-border:#57936C;
  --color-success-solid:#2E7D4F;
  --color-success-on-solid:#F7F4EC;
  --color-warning-fg:#7A4E00;
  --color-warning-bg:#FCEFCF;
  --color-warning-border:#B3801C;
  --color-warning-solid:#F2B33D;
  --color-warning-on-solid:#121815;
  --color-error-fg:#A2332A;
  --color-error-bg:#F9E3DE;
  --color-error-border:#C36D60;
  --color-error-solid:#B8432F;
  --color-error-on-solid:#F7F4EC;
  --color-info-fg:#285E7D;
  --color-info-bg:#E1ECF2;
  --color-info-border:#628CA4;
  --color-info-solid:#2F6E92;
  --color-info-on-solid:#F7F4EC;
}
[data-theme="dark"]{
  color-scheme:dark;
  --color-bg:#0F241D;
  --color-surface:#163C30;
  --color-surface-raised:#1D4739;
  --color-surface-tint:#22493C;
  --color-surface-strong:#0A1A14;
  --color-on-strong:#F7F4EC;
  --color-on-strong-muted:#B9CDBF;
  --color-text:#F7F4EC;
  --color-text-muted:#B9CDBF;
  --color-heading:#F7F4EC;
  --color-link:#DDE8DC;
  --color-link-hover:#F7F4EC;
  --color-eyebrow:#F2B33D;
  --color-accent:#F2B33D;
  --color-accent-hover:#F5C25F;
  --color-on-accent:#121815;
  --color-selected-bg:#DDE8DC;
  --color-selected-text:#163C30;
  --color-chip-bg:#22493C;
  --color-chip-text:#DDE8DC;
  --color-line:#2C5547;
  --color-line-strong:rgb(221 232 220 / .28);
  --color-focus:#F2B33D;
  --color-idle:#7F8F87;
  --color-dotgrid:rgb(247 244 236 / .16);
  --color-logo-ring:#DDE8DC;
  --color-logo-dot:#F2B33D;
  --color-logo-word:#F7F4EC;
  --color-shadow:0 24px 50px rgb(0 0 0 / .35);
  --color-success-fg:#8FD4A5;
  --color-success-bg:#173F2B;
  --color-success-border:#4F9A6A;
  --color-success-solid:#8FD4A5;
  --color-success-on-solid:#121815;
  --color-warning-fg:#F2B33D;
  --color-warning-bg:#3E3418;
  --color-warning-border:#B8892C;
  --color-warning-solid:#F2B33D;
  --color-warning-on-solid:#121815;
  --color-error-fg:#F4A497;
  --color-error-bg:#45231F;
  --color-error-border:#C87468;
  --color-error-solid:#F4A497;
  --color-error-on-solid:#121815;
  --color-info-fg:#9CCBE6;
  --color-info-bg:#1A3644;
  --color-info-border:#6291AD;
  --color-info-solid:#9CCBE6;
  --color-info-on-solid:#121815;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  color-scheme:dark;
  --color-bg:#0F241D;
  --color-surface:#163C30;
  --color-surface-raised:#1D4739;
  --color-surface-tint:#22493C;
  --color-surface-strong:#0A1A14;
  --color-on-strong:#F7F4EC;
  --color-on-strong-muted:#B9CDBF;
  --color-text:#F7F4EC;
  --color-text-muted:#B9CDBF;
  --color-heading:#F7F4EC;
  --color-link:#DDE8DC;
  --color-link-hover:#F7F4EC;
  --color-eyebrow:#F2B33D;
  --color-accent:#F2B33D;
  --color-accent-hover:#F5C25F;
  --color-on-accent:#121815;
  --color-selected-bg:#DDE8DC;
  --color-selected-text:#163C30;
  --color-chip-bg:#22493C;
  --color-chip-text:#DDE8DC;
  --color-line:#2C5547;
  --color-line-strong:rgb(221 232 220 / .28);
  --color-focus:#F2B33D;
  --color-idle:#7F8F87;
  --color-dotgrid:rgb(247 244 236 / .16);
  --color-logo-ring:#DDE8DC;
  --color-logo-dot:#F2B33D;
  --color-logo-word:#F7F4EC;
  --color-shadow:0 24px 50px rgb(0 0 0 / .35);
  --color-success-fg:#8FD4A5;
  --color-success-bg:#173F2B;
  --color-success-border:#4F9A6A;
  --color-success-solid:#8FD4A5;
  --color-success-on-solid:#121815;
  --color-warning-fg:#F2B33D;
  --color-warning-bg:#3E3418;
  --color-warning-border:#B8892C;
  --color-warning-solid:#F2B33D;
  --color-warning-on-solid:#121815;
  --color-error-fg:#F4A497;
  --color-error-bg:#45231F;
  --color-error-border:#C87468;
  --color-error-solid:#F4A497;
  --color-error-on-solid:#121815;
  --color-info-fg:#9CCBE6;
  --color-info-bg:#1A3644;
  --color-info-border:#6291AD;
  --color-info-solid:#9CCBE6;
  --color-info-on-solid:#121815;
  }
}
/* ==== END GENERATED ==== */