/* ==========================================================================
   Advisy CoPilot Redesign - Design Tokens
   Source of truth: .planning/redesign/10-ui-spec.md (visual direction, spacing,
   status vocabulary, WCAG 2.1 AA). Brand values sampled from the live app
   (app.html :root): DM Sans; blue #2F7CF6 / #1A5FCC; ink #0E1B2E; status
   green/amber/red; 16px radius.

   Light is the app's native theme. Dark is added here (the app ships light-only)
   because the UI-SPEC requires AA contrast in BOTH themes. Every status color is
   defined as an AA-verified foreground/background pair per theme (see A11Y.md for
   the measured contrast ratios). Meaning is never encoded in color alone - badges
   and status always carry a text label too.

   Theme resolution: default = light. Dark applies when the OS prefers dark AND the
   author has not pinned light; an explicit [data-theme] attribute (set by the
   preview toggle) always wins in both directions.
   ========================================================================== */

:root {
  /* ---- Typography ---- */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    system-ui, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (px expressed in rem, 1rem = 16px). xs/sm/base tightened
     2026-07-17 (dashboard v3 token pass, mock spec "32/20/14/12/11" - more
     contrast between micro-labels and body copy); lg/xl/2xl unchanged. */
  --fs-xs: 0.6875rem;  /* 11 - timestamps, micro-labels */
  --fs-sm: 0.75rem;    /* 12 - metadata, chips */
  --fs-base: 0.875rem; /* 14 - body */
  --fs-md: 1.0625rem;  /* 17 - transcript reading size / card titles */
  --fs-lg: 1.25rem;    /* 20 - section headings */
  --fs-xl: 1.625rem;   /* 26 - page / big stat */
  --fs-2xl: 2.125rem;  /* 34 - hero score */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --lh-reading: 1.7;   /* transcript measure */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Transcript reading measure (editorial, not chat) */
  --measure: 68ch;

  /* ---- Spacing scale (4/8/12/16/24/32/48) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 12px;   /* buttons (draft spec) */
  --r-lg: 20px;   /* card radius (softer, more premium - dashboard v3 token pass, was 16px) */
  --r-xl: 22px;   /* hero shells / room cards (draft 22-26px band) */
  --r-pill: 999px;

  /* ---- Elevation (draft: soft, generous, blue-grey - never grey-black) ----
     shadow-1 updated 2026-07-17 (dashboard v3 token pass) to the mock's exact
     elevated-card spec `0 20px 60px rgba(45,84,135,.08)`, replacing the old
     near-flat 1-3px shadow that had drifted from this file's own "soft,
     generous" elevation language. Every card built on --shadow-1 gets this
     for free (see components.css .rd-card etc). */
  --shadow-1: 0 20px 60px rgba(45, 84, 135, 0.08);
  --shadow-2: 0 12px 32px rgba(45, 84, 135, 0.14);
  --shadow-hover: 0 16px 32px rgba(45, 84, 135, 0.08);  /* interactive card lift */
  --shadow-shell: 0 24px 60px rgba(45, 84, 135, 0.08);  /* hero/feature shells */
  --shadow-btn: 0 9px 24px rgba(47, 124, 246, 0.2);     /* primary button glow */
  --shadow-btn-hover: 0 12px 28px rgba(47, 124, 246, 0.26);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);

  /* Layout */
  --shell-h: 56px;
  --sidebar-w: 264px;
  --mobilebar-h: 60px;
  --content-max: 1120px;

  /* =====================  LIGHT THEME (default)  ===================== */
  --bg: #F7FAFF;
  /* Draft canvas: off-white with two huge soft brand glows (cyan top-right,
     blue top-left). Cards stay pure white on top of it. */
  --canvas:
    radial-gradient(900px 500px at 92% 3%, rgba(0, 183, 190, 0.08), transparent 60%),
    radial-gradient(900px 540px at 10% 1%, rgba(47, 124, 246, 0.09), transparent 64%),
    var(--bg);
  --surface: #FFFFFF;
  --surface-2: #F1F6FF;   /* subtle inset / hover fill */
  --surface-3: #E8F0FC;

  --text: #0E1B2E;        /* AA on surface & bg */
  --text-strong: #081121;
  --muted: #51607A;       /* darkened from app #5A6478 to clear AA on white */
  --faint: #5F6B80;       /* secondary text, AA 5.4:1 on surface */

  --line: #DCE5F2;
  --line-soft: #EAF0FA;

  --brand: #2F7CF6;        /* brand accent: borders, focus ring, sparkline stroke */
  --brand-strong: #1A5FCC; /* link/label text on light (AA 5.9:1 on white) */
  --brand-btn: #2064D4;    /* solid primary-button fill: white text AA 5.5:1 */
  --brand-tint: #E7F0FF;
  --on-brand: #FFFFFF;     /* text on --brand-btn */

  --accent-cyan: #0A716C;  /* teal accent, text-safe (AA 5.9:1 on white) */

  /* Status pairs: fg is AA (>=4.5:1) on its bg; border for definition. */
  --good-fg: #0B6B43;  --good-bg: #E7F6EE;  --good-border: #B7E3CB;  --good-solid: #1E9E6A;
  --warn-fg: #8A5300;  --warn-bg: #FBF1DD;  --warn-border: #F0D9A8;  --warn-solid: #C9821B;
  --bad-fg:  #A82121;  --bad-bg:  #FBE9E9;  --bad-border:  #F2C4C4;  --bad-solid:  #D64545;
  --info-fg: #1A4FA0;  --info-bg: #E7F0FF;  --info-border: #C4D8F7;  --info-solid: #2F7CF6;
  --neutral-fg: #3A4456; --neutral-bg: #EEF1F6; --neutral-border: #D8DFEA; --neutral-solid: #5A6478;

  /* Skeleton shimmer */
  --skeleton-base: #E9EFF8;
  --skeleton-hi: #F4F8FF;

  color-scheme: light;
}

/* Keep the canonical surface's AA-muted text from inheriting the legacy app's
   identically named --muted custom property. A declaration on the surface wins
   by scope without changing the existing Practice UI. */
.rd-root { --muted: #51607A; }

/* Shared dark token block, applied two ways so an explicit choice always wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0B1220;
    --surface: #121C2E;
    --surface-2: #17233A;
    --surface-3: #1E2C46;

    --text: #E8EDF6;
    --text-strong: #F5F8FD;
    --muted: #9DA9BC;       /* AA on --surface */
    --faint: #7E8AA0;

    --line: #27324A;
    --line-soft: #1C2740;

    --brand: #5A9BFF;
    --brand-strong: #8FBBFF;/* link text on dark (AA 8.7:1) */
    --brand-btn: #5A9BFF;   /* solid primary-button fill; dark text on it */
    --brand-tint: #172A46;
    --on-brand: #08121F;    /* dark text on --brand-btn (AA 6.8:1) */

    --accent-cyan: #46C7C2;

    --good-fg: #74E0A6;  --good-bg: #10281E;  --good-border: #1E4634;  --good-solid: #2FB877;
    --warn-fg: #F1C27A;  --warn-bg: #2C2413;  --warn-border: #4A3C1E;  --warn-solid: #E0A64B;
    --bad-fg:  #F3A3A3;  --bad-bg:  #301A1B;  --bad-border:  #522A2B;  --bad-solid:  #E56A6A;
    --info-fg: #9BC0FF;  --info-bg: #152742;  --info-border: #2A426B;  --info-solid: #5A9BFF;
    --neutral-fg: #B4BFD1; --neutral-bg: #1B2537; --neutral-border: #2C384F; --neutral-solid: #8592A8;

    --skeleton-base: #1A2540;
    --skeleton-hi: #223052;

    --canvas:
      radial-gradient(900px 500px at 92% 3%, rgba(70, 199, 194, 0.05), transparent 60%),
      radial-gradient(900px 540px at 10% 1%, rgba(90, 155, 255, 0.06), transparent 64%),
      var(--bg);
    --shadow-1: 0 20px 60px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.35);
    --shadow-shell: 0 24px 60px rgba(0, 0, 0, 0.4);
    --shadow-btn: 0 9px 24px rgba(90, 155, 255, 0.14);
    --shadow-btn-hover: 0 12px 28px rgba(90, 155, 255, 0.2);

    color-scheme: dark;
  }
  :root:not([data-theme='light']) .rd-root { --muted: #9DA9BC; }
}

/* Explicit pin - wins over the media query in both directions. */
:root[data-theme='dark'] {
  --bg: #0B1220;
  --surface: #121C2E;
  --surface-2: #17233A;
  --surface-3: #1E2C46;

  --text: #E8EDF6;
  --text-strong: #F5F8FD;
  --muted: #9DA9BC;
  --faint: #7E8AA0;

  --line: #27324A;
  --line-soft: #1C2740;

  --brand: #5A9BFF;
  --brand-strong: #8FBBFF;
  --brand-btn: #5A9BFF;
  --brand-tint: #172A46;
  --on-brand: #08121F;

  --accent-cyan: #46C7C2;

  --good-fg: #74E0A6;  --good-bg: #10281E;  --good-border: #1E4634;  --good-solid: #2FB877;
  --warn-fg: #F1C27A;  --warn-bg: #2C2413;  --warn-border: #4A3C1E;  --warn-solid: #E0A64B;
  --bad-fg:  #F3A3A3;  --bad-bg:  #301A1B;  --bad-border:  #522A2B;  --bad-solid:  #E56A6A;
  --info-fg: #9BC0FF;  --info-bg: #152742;  --info-border: #2A426B;  --info-solid: #5A9BFF;
  --neutral-fg: #B4BFD1; --neutral-bg: #1B2537; --neutral-border: #2C384F; --neutral-solid: #8592A8;

  --skeleton-base: #1A2540;
  --skeleton-hi: #223052;

  --canvas:
    radial-gradient(900px 500px at 92% 3%, rgba(70, 199, 194, 0.05), transparent 60%),
    radial-gradient(900px 540px at 10% 1%, rgba(90, 155, 255, 0.06), transparent 64%),
    var(--bg);
  --shadow-1: 0 20px 60px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.35);
  --shadow-shell: 0 24px 60px rgba(0, 0, 0, 0.4);
  --shadow-btn: 0 9px 24px rgba(90, 155, 255, 0.14);
  --shadow-btn-hover: 0 12px 28px rgba(90, 155, 255, 0.2);

  color-scheme: dark;
}

:root[data-theme='dark'] .rd-root { --muted: #9DA9BC; }
:root[data-theme='light'] .rd-root { --muted: #51607A; }