/*
 * ChartMate design tokens (light mode).
 *
 * Two layers:
 *   1. Raw scales (--cm-teal-*, --cm-gray-*, --cm-blue-*, semantic colors,
 *      typography, spacing, radius, shadow). Numerically consistent: low =
 *      light, high = dark.
 *   2. Semantic tokens (--cm-bg-*, --cm-text-*, --cm-border, --cm-interactive)
 *      that map raw scale steps to roles. Consumed by stylesheetv3.css.
 *
 * Dark-mode overrides redefine the raw gray scale and re-map background
 * semantic tokens (text/border tokens re-resolve through the redefined
 * scale). See the :root.dark block.
 */

:root {
  /* ---------- Color: brand teal scale ---------- */
  --cm-teal-50: #ecfdf5;
  --cm-teal-100: #ccfbf1;
  --cm-teal-300: #5eead4;
  --cm-teal-500: #14b8a6;
  --cm-teal-600: #0d9488;
  --cm-teal-700: #0f766e;
  --cm-teal-800: #115e59; /* WCAG fill: hover step between 700 and 900 */
  --cm-teal-900: #134e4a;

  /* ---------- Color: neutrals ---------- */
  --cm-gray-0: #ffffff;
  --cm-gray-50: #f8fafc;
  --cm-gray-100: #f1f5f9;
  --cm-gray-200: #e2e8f0;
  --cm-gray-300: #cbd5e1;
  --cm-gray-500: #64748b;
  --cm-gray-700: #334155;
  --cm-gray-900: #0f172a;

  /* ---------- Color: accent + semantic ---------- */
  --cm-blue-100: #dbeafe;
  --cm-blue-500: #3b82f6;
  --cm-navy: #1e3a8a;
  --cm-success-500: #10b981;
  --cm-warning-500: #f59e0b;
  --cm-warning-700: #b45309; /* WCAG: dark amber for warning surfaces (white-text bg) */
  --cm-danger-500: #ef4444;
  --cm-danger-700: #b91c1c; /* WCAG: dark red for error surfaces (white-text bg) */

  /* ---------- Typography ---------- */
  --cm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --cm-text-xs: 0.75rem; /* 12px */
  --cm-text-sm: 0.875rem; /* 14px */
  --cm-text-base: 1rem; /* 16px */
  --cm-text-lg: 1.125rem; /* 18px */
  --cm-text-xl: 1.25rem; /* 20px */
  --cm-text-2xl: 1.5rem; /* 24px */
  --cm-text-3xl: 1.875rem; /* 30px */

  --cm-lh-tight: 1.2;
  --cm-lh-snug: 1.35;
  --cm-lh-normal: 1.5;

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

  /* ---------- Radius / shadow / focus ring ---------- */
  --cm-radius-sm: 4px;
  --cm-radius-md: 6px;
  --cm-radius-lg: 8px;
  --cm-radius-xl: 12px;

  --cm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --cm-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --cm-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --cm-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.06);

  --cm-focus-ring: 0 0 0 3px rgba(20, 184, 166, 0.35);

  /* ---------- Spacing ---------- */
  --cm-space-1: 4px;
  --cm-space-2: 8px;
  --cm-space-3: 12px;
  --cm-space-4: 16px;
  --cm-space-5: 20px;
  --cm-space-6: 24px;
  --cm-space-8: 32px;
  --cm-space-10: 40px;

  /* ---------- Layout primitives (kept from legacy v3) ---------- */
  --scrollbar-thickness: 12px;
  --sidebar-width: 70px;

  /* ---------- Semantic tokens (light mode) ---------- */
  --cm-bg-body: var(--cm-gray-50);
  --cm-bg-surface: var(--cm-gray-0);
  --cm-bg-raised: var(--cm-gray-0);
  --cm-bg-muted: var(--cm-gray-100);
  --cm-bg-sidebar: var(--cm-gray-900);

  --cm-text-body: var(--cm-gray-700);
  --cm-text-heading: var(--cm-gray-900);
  --cm-text-muted: var(--cm-gray-500);
  --cm-text-on-dark: var(--cm-gray-0);
  --cm-text-on-interactive: #ffffff; /* Foreground on .button bg; flips dark in :root.dark for AA. */

  --cm-border: var(--cm-gray-200);
  --cm-border-strong: var(
    --cm-gray-500
  ); /* Was gray-300; needed slate-500 for input-border 4.76:1 vs surface (UI 3:1 AA). */

  /* Interactive accent — teal-700 keeps white-on-teal AA (5.47:1) and link
     text on white AA (5.47:1). hover/active step darker for visible feedback. */
  --cm-interactive: var(--cm-teal-700);
  --cm-interactive-hover: var(--cm-teal-800);
  --cm-interactive-active: var(--cm-teal-900);

  --cm-bg-warning: var(
    --cm-warning-700
  ); /* Surface for .warning banners — white-on-amber-700 = 5.02:1 AA. */
  --cm-bg-danger: var(
    --cm-danger-700
  ); /* Surface for .error/.fail banners — white-on-red-700 = 5.94:1 AA. */
}

:root.dark {
  /* Raw gray scale flipped — 0 is now deepest, 900 is the lightest visible.
     Surface steps spaced wider than the original palette so cards / rows /
     headers read as distinct elevation tiers, and borders bumped lighter
     so they're visible against the (still dark) surface they sit on. */
  --cm-gray-0: #0b1220;
  --cm-gray-50: #131c2e;
  --cm-gray-100: #1e293b;
  --cm-gray-200: #3b4a63;
  --cm-gray-300: #4b5c76;
  --cm-gray-500: #b6c2d2;
  --cm-gray-700: #e8eef5;
  --cm-gray-900: #ffffff;

  /* Brand teal — lighter shades for AA contrast on dark surfaces.
     Note teal-800 / teal-900 are NOT redefined: in dark mode --cm-interactive
     remaps below to the brighter dark teals so .button stays a bright accent
     with dark text. */
  --cm-teal-500: #2dd4bf;
  --cm-teal-600: #5eead4;
  --cm-teal-700: #99f6e4;

  /* Background semantic tokens — REMAPPED so layered surfaces get
     progressively lighter (visual-depth direction is inverted vs light) */
  --cm-bg-body: var(--cm-gray-0);
  --cm-bg-surface: var(--cm-gray-50);
  --cm-bg-raised: var(--cm-gray-100);
  --cm-bg-muted: var(--cm-gray-100);
  /* --cm-bg-sidebar would inherit --cm-gray-900 from :root, which after this
     scale redefinition resolves to #F8FAFC — that would invert the sidebar
     to LIGHT in dark mode, which is wrong. Pin it explicitly: */
  --cm-bg-sidebar: #0f172a;

  /* Text-on-dark: in dark mode, the gray scale flipped, so --cm-gray-0 = #0B1020
     (deepest). We need text-on-dark to STILL mean "light text", so re-anchor it
     to the lightest end of the redefined scale. */
  --cm-text-on-dark: var(--cm-gray-900);

  /* Text-on-interactive: dark-mode .button bg resolves to teal-500 dark =
     #2DD4BF (bright accent). White text on it is 1.86:1 (FAIL). Pin foreground
     to deep slate (#0F172A) — 9.59:1 AAA. This is the inverse of light mode,
     where --cm-interactive is teal-700 and white text reads. */
  --cm-text-on-interactive: #0f172a;

  /* Interactive remap for dark-mode .button: keep the bright dark-mode teals
     (already redefined above) so the button reads as a vivid accent against
     the near-black surface. Hover lightens, active lightens further — opposite
     direction from light mode but consistent with the inverted scale. */
  --cm-interactive: var(--cm-teal-500); /* dark = #2DD4BF */
  --cm-interactive-hover: var(--cm-teal-600); /* dark = #5EEAD4 */
  --cm-interactive-active: var(--cm-teal-700); /* dark = #99F6E4 */

  /* Border-strong: light-mode value (gray-500) re-resolves through the dark
     scale to #94A3B8 — that hits 6.92:1 vs bg-surface, which is correct.
     The base :root rule already maps via raw scale, so no override needed
     here — listed for clarity. */
  /* --cm-border-strong: var(--cm-gray-500);   inherited */

  /* --cm-text-heading currently re-resolves to gray-900 = #F8FAFC (light) which
     is correct for headings. Same for --cm-text-body (gray-700 = #E2E8F0).
     --cm-text-muted (gray-500 = #94A3B8) — fine. No additional overrides needed. */

  /* Text & border semantic tokens are NOT redefined here — they re-resolve
     through the redefined raw scale: --cm-text-body still points at
     --cm-gray-700, which in this mode = #E2E8F0 (light text). Same for
     headings (--cm-gray-900 → #F8FAFC) and borders (--cm-gray-200 → #273244). */

  /* Shadows — slate alpha doesn't read on dark, use black */
  --cm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --cm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4);
  --cm-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.45);
  --cm-focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.45);
}

/*
 * Deprecated aliases — point legacy --accent-color-* / --body-color / etc.
 * at the new --cm-* tokens. Lets every rule in stylesheetv3.css that we have
 * not explicitly migrated keep rendering with the new palette in light AND
 * dark. Remove these once all selectors in v3 + page CSS reference --cm-*
 * directly.
 */
:root,
:root.dark {
  --body-color: var(--cm-bg-body); /* deprecated: prefer --cm-bg-body */
  --background-color: var(--cm-bg-surface); /* deprecated: prefer --cm-bg-surface */
  --text-color: var(--cm-text-body); /* deprecated: prefer --cm-text-body */
  --dark-background-color: var(--cm-bg-sidebar); /* deprecated: prefer --cm-bg-sidebar */
  --dark-text-color: var(--cm-text-on-dark); /* deprecated: prefer --cm-text-on-dark */
  /* Pinned dark chrome for the PDF editor + right-sidebar surfaces.
     One step lighter than --cm-bg-sidebar (#0F172A) — uses the value
     dark mode's --cm-bg-surface token resolves to so chrome surfaces
     don't blend into the navbar/sidebar darker shade. Same in light
     and dark mode. */
  --cm-bg-chrome: #131c2e;
  --container-hover-color: var(--cm-bg-muted); /* deprecated: prefer --cm-bg-muted */
  --table-header-color: var(--cm-bg-muted); /* deprecated: prefer --cm-bg-muted */
  --table-row-color: var(--cm-bg-surface); /* deprecated */
  --table-row-alternate-color: var(--cm-bg-surface); /* deprecated: zebra removed */
  --table-row-hover-color: var(--cm-bg-muted); /* deprecated */
  --accent-color-1: var(--cm-interactive); /* deprecated: prefer --cm-interactive */
  --accent-color-2: var(--cm-interactive-hover); /* deprecated */
  --accent-color-3: var(--cm-blue-500); /* deprecated */
  --accent-color-4: var(--cm-blue-100); /* deprecated */
  --accent-color-5: var(--cm-navy); /* deprecated */
  --default-box-shadow: var(--cm-shadow-sm); /* deprecated: prefer --cm-shadow-* */
  --popup-background-color: rgba(15, 23, 42, 0.5);
}