/*
 * EarthlyAI design tokens - THE single source of truth for the whole site.
 *
 * This one file is loaded by BOTH worlds:
 *   - the React app, via a <link> in index.html
 *   - all 15 static shells (patient overview, its categories, the demo pages)
 * so changing a colour here changes every page. Never define a raw colour anywhere else.
 *
 * ---------------------------------------------------------------------------
 * HOW TO RETHEME THE SITE
 * Edit only the PALETTE block below, and its counterpart in the dark block. Everything
 * else in this file, and every stylesheet in the project, derives from those values.
 * ---------------------------------------------------------------------------
 *
 * Why the aliases at the bottom need no dark counterpart: CSS custom properties resolve
 * when they are USED, not when they are declared. `--page-bg: var(--bg)` declared once in
 * :root automatically picks up whatever --bg is under [data-theme="dark"]. So the dark
 * block only ever restates the palette.
 *
 * PALETTE IS UNSETTLED - do not iterate on it without the user. Three grounds have been
 * tried and rejected: warm cream (read as AI-generated), neutral grey (dull), deep ink
 * blue (worse). The brand green --signal is NOT in question.
 *
 * See .ai-memory/wiki/spec-marketing-site-redesign.md (AC-1..AC-9).
 */

:root {
  color-scheme: light;

  /* ======================= PALETTE - EDIT HERE ============================ */

  /* ground and surfaces */
  --bg: #e9edec;
  --bg-1: #dfe7e6;
  --bg-2: #d3dedd;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #dfe7e6;
  --surface-accent: #c9d6d5;
  --surface-contrast: #0e2226;

  /* ink and rules */
  --text: #0e2226;
  --text-dim: #3f565a;
  --text-soft: #6b8285;
  --stroke: #c6d3d2;
  --stroke-strong: #a3b5b4;
  --on-contrast: #e9edec;
  --contrast-muted: #9fb3b4;
  --contrast-stroke: #2c4448;
  --contrast-accent: #7fd4ce;
  --surface-contrast-raised: #20393d;
  --contrast-soft: #7e9497;

  /* brand: the one saturated colour, used full-bleed with near-black type on top.
   * White on --signal is about 3:1 and fails AA, so on-signal text uses --signal-ink. */
  --signal: #2fafb5;
  --signal-ink: #07211f;
  --signal-warm: #c0928d;
  --signal-gradient: linear-gradient(
    118deg,
    var(--signal) 0%,
    color-mix(in srgb, var(--signal) 58%, var(--signal-warm)) 52%,
    var(--signal-warm) 100%
  );
  --signal-deep: #1e7c83;

  /* accents (legacy names, still referenced widely across site/app/wildfire css) */
  --emerald: #14707a;
  --cyan: #17747c;
  --blue: #2e6c9a;
  --gold: #8a6a16;
  --rose: #b5613a;

  /* six product domains, held at comparable lightness so none dominates */
  --domain-process: #a34a22;
  --domain-energy: #75590c;
  --domain-reliability: #3b6720;
  --domain-vision: #9e3b6b;
  --domain-medical: #2e6c9a;
  --domain-environmental: #7a4e8c;

  /* status, shared by the marketing site and the clinical surfaces */
  --state-good: #12756c;
  --state-good-wash: #e0efed;
  --state-warn: #7c5a12;
  --state-warn-dot: #c08f34;
  --state-warn-wash: #f0ece2;
  --state-warn-border: #d8cdb8;
  --state-bad: #9b3a2c;
  --state-bad-dot: #a83024;
  --state-bad-wash: #f3e9e6;
  --state-bad-border: #dcc3bc;
  --state-idle: #94a8a8;

  /* clinical surfaces that have no marketing equivalent */
  --timeline-bg: #eef4f3;
  --timeline-line: #cfdedd;
  --timeline-ring: #ffffff;
  --encounter-bg: #e7f0ef;
  --data-divider: #dde8e7;
  --count-bg: #d8e8e6;
  --resolved-bg: #e4eeed;
  --resolved-ink: #5b7274;
  --risk-ink: #5d6b64;
  --risk-critical-ink: #7f5a55;
  --evidence-ink: #4f6260;
  --evidence-span-ink: #3d5150;
  --drawer-backdrop: rgba(20, 28, 38, 0.28);
  --drawer-shadow: -18px 0 48px rgba(31, 39, 51, 0.16);

  --shadow: none;

  /* ===================== END PALETTE ===================================== */

  /* type scale: eight fixed steps. A stylesheet must never write its own clamp(). */
  --step-1: clamp(40px, 6.4vw, 72px);
  --step-2: clamp(30px, 4.4vw, 48px);
  --step-3: clamp(23px, 2.8vw, 32px);
  --step-4: 20px;
  --step-5: 16px;
  --step-6: 14px;
  --step-7: 12px;
  --step-8: 11px;

  --lh-display: 1.04;
  --lh-heading: 1.14;
  --lh-tight: 1.3;
  --lh-body: 1.6;

  --track-display: -0.03em;
  --track-tight: -0.022em;
  --track-eyebrow: 0.14em;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 144px;
  --section-pad: clamp(var(--space-4), 7vw, var(--space-6));
  --section-pad-lg: clamp(var(--space-5), 10vw, var(--space-7));

  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-prose: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --radius-control: 2px;
  --radius-card: 0px;
  --radius-panel: 0px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
   * Aliases for the static patient and demo shells.
   *
   * These names are used throughout public/patient-overview.css and friends. They are
   * DERIVED, never raw, so the shells inherit the palette above and stay in step with the
   * React site. Declared once: var() resolves at use time, so they follow the dark block
   * automatically and must not be restated there.
   * ------------------------------------------------------------------- */
  --font-ui: var(--font-body);
  --page-bg: var(--bg);
  --card-bg: var(--surface-card);
  --rail-bg: var(--surface-subtle);
  /* The identity bar is dark in BOTH themes, so everything on it derives from the
   * CONTRAST family, never from the theme surfaces. Mapping --identity-surface to
   * --surface-accent put a light grey chip on a dark bar and made the initials
   * unreadable. Rule: if it sits on --surface-contrast, its colour comes from a
   * --contrast-* or --on-contrast token. */
  --identity-bg: var(--surface-contrast);
  --identity-surface: var(--surface-contrast-raised);
  --identity-ink: var(--on-contrast);
  --identity-accent: var(--contrast-accent);
  --identity-meta: #9fb3b4;
  --identity-label: #7e9497;
  --ink: var(--text);
  --muted: var(--text-dim);
  --subtle: var(--text-soft);
  --hairline: var(--stroke);
  --link: var(--emerald);
  --link-hover: var(--signal-deep);
  --focus: var(--emerald);
  --rail-link: var(--text-dim);
  --control-hover-bg: var(--surface-accent);
  --control-active-bg: var(--surface-accent);
  --amber: var(--state-warn);
  --amber-dot: var(--state-warn-dot);
  --amber-bg: var(--state-warn-wash);
  --amber-border: var(--state-warn-border);
  --red: var(--state-bad);
  --red-dot: var(--state-bad-dot);
  --red-bg: var(--state-bad-wash);
  --red-border: var(--state-bad-border);
  --green: var(--state-good);
  --green-bg: var(--state-good-wash);
  --routine: var(--state-idle);
  --radius: var(--radius-card);
  --rail-width: 190px;
}

/*
 * Dark theme. Restates the PALETTE only - every alias above follows automatically.
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b1c1f;
  --bg-1: #0e2226;
  --bg-2: #12292d;
  --glass: #102529;
  --glass-strong: #173237;
  --surface-card: #102529;
  --surface-subtle: #143035;
  --surface-accent: #1d3f45;
  --surface-contrast: #07171a;

  --text: #e7eeed;
  --text-dim: #9db3b4;
  --text-soft: #6f8789;
  --stroke: #1e3a3f;
  --stroke-strong: #2f5157;
  --on-contrast: #e7eeed;
  --contrast-muted: #9fb3b4;
  --contrast-stroke: #2f5157;
  --contrast-accent: #7fd4ce;
  --surface-contrast-raised: #1b3439;
  --contrast-soft: #7e9497;

  --signal: #2fafb5;
  --signal-ink: #07211f;
  --signal-warm: #c0928d;
  --signal-deep: #26949a;

  --emerald: #5cc9c4;
  --cyan: #5bbcc6;
  --blue: #7faddd;
  --gold: #e0b478;
  --rose: #e7a97e;

  --domain-process: #e7a97e;
  --domain-energy: #dcb56a;
  --domain-reliability: #9cc47c;
  --domain-vision: #e08ab4;
  --domain-medical: #7faddd;
  --domain-environmental: #bd94d4;

  --state-good: #6fd0c2;
  --state-good-wash: #10302e;
  --state-warn: #dcb06a;
  --state-warn-dot: #dcb06a;
  --state-warn-wash: #26261d;
  --state-warn-border: #514b34;
  --state-bad: #e59a8c;
  --state-bad-dot: #e59a8c;
  --state-bad-wash: #2b2020;
  --state-bad-border: #62413e;
  --state-idle: #6b8285;

  --timeline-bg: #0e2226;
  --timeline-line: #2a464b;
  --timeline-ring: #102529;
  --encounter-bg: #14282c;
  --data-divider: #1e3a3f;
  --count-bg: #173133;
  --resolved-bg: #163034;
  --resolved-ink: #9db3b4;
  --risk-ink: #b9c8c4;
  --risk-critical-ink: #e2b0a8;
  --evidence-ink: #a9c0bd;
  --evidence-span-ink: #c4d6d3;
  --drawer-backdrop: rgba(5, 8, 12, 0.64);
  --drawer-shadow: -18px 0 48px rgba(0, 0, 0, 0.42);

  --shadow: none;
}