/*
 * Cortex — Design Tokens
 * Professional, data-dense. Pink retained as signature accent.
 *
 * Coexists with legacy tokens in _global.css on unredesigned pages (auth,
 * profile, onboarding, API tokens). All variables here are rd-prefixed and
 * do not collide with the legacy token set.
 *
 * Reference: docs/design-system.md
 */

:root {
  /* Type ramp */
  --rd-font-sans: "Recursive", "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rd-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Display face — Bangers is single-weight (400), already-slanted comic-pop.
     Never apply font-style: italic on top of it. */
  --rd-font-display: "Bangers", "Inter Tight", system-ui, sans-serif;

  /* Type ramp — rem-based so it scales with the responsive html root
     (14px default, 17px at min-width: 100ch). See base.css. */
  --rd-text-2xs:  0.7rem;    /*  9.8 / 11.9px  — eyebrow / micro labels */
  --rd-text-xs:   0.8rem;    /* 11.2 / 13.6px  — captions, metadata */
  --rd-text-sm:   0.875rem;  /* 12.3 / 14.9px  — secondary UI */
  --rd-text-base: 1rem;      /* 14   / 17px    — default body */
  --rd-text-md:   1.125rem;  /* 15.8 / 19.1px  — emphasized body */
  --rd-text-lg:   1.25rem;   /* 17.5 / 21.3px  — h3 / card titles */
  --rd-text-xl:   1.5rem;    /* 21   / 25.5px  — h2 / page sub */
  --rd-text-2xl:  2rem;      /* 28   / 34px    — h1 / page title */
  --rd-text-3xl:  2.75rem;   /* 38.5 / 46.75px — display / empty states */

  --rd-leading-tight: 1.15;
  --rd-leading-snug: 1.3;
  --rd-leading-normal: 1.5;

  /* Spacing (4px base) */
  --rd-sp-1: 4px;
  --rd-sp-2: 8px;
  --rd-sp-3: 12px;
  --rd-sp-4: 16px;
  --rd-sp-5: 20px;
  --rd-sp-6: 24px;
  --rd-sp-7: 32px;
  --rd-sp-8: 40px;
  --rd-sp-9: 56px;

  /* Radii — square by default. Status dots, avatars, and pills opt back
     in with explicit 50% / --rd-radius-full. Card / button / input
     surfaces all read flat to match the pop-art canvas. */
  --rd-radius-sm: 0;
  --rd-radius-md: 0;
  --rd-radius-lg: 0;
  --rd-radius-xl: 0;
  --rd-radius-full: 999px;

  /* Accent — pink, signature. Same hue across both themes. */
  --rd-accent: oklch(0.68 0.22 0);
  --rd-accent-hover: oklch(0.72 0.22 0);
  --rd-accent-soft: oklch(0.68 0.22 0 / 0.12);
  --rd-accent-fg: #fff;

  /* Semantic */
  --rd-success: oklch(0.72 0.16 155);
  --rd-success-soft: oklch(0.72 0.16 155 / 0.14);
  --rd-warn: oklch(0.78 0.15 78);
  --rd-warn-soft: oklch(0.78 0.15 78 / 0.16);
  --rd-danger: oklch(0.68 0.22 27);
  --rd-danger-soft: oklch(0.68 0.22 27 / 0.14);
  --rd-info: oklch(0.72 0.14 240);
  --rd-info-soft: oklch(0.72 0.14 240 / 0.14);

  /* Elevation — flat is preferred. */
  --rd-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
  --rd-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
  --rd-shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);

  /* Motion */
  --rd-dur-fast: 100ms;
  --rd-dur: 160ms;
  --rd-ease: cubic-bezier(.2, .7, .3, 1);

  /* ---------------------------------------------------------------- */
  /* Pop-art flair — original Cortex triad, restored as proper tokens. */
  /* Used by the additive decorative layer in pop.css. The base        */
  /* redesign tokens above are the source of truth for the rest of     */
  /* the UI; pop tokens never replace --rd-accent.                     */
  /* ---------------------------------------------------------------- */
  --pop-pink: oklch(0.66 0.27 0);
  --pop-pink-hover: oklch(0.70 0.27 0);
  --pop-pink-soft: oklch(0.66 0.27 0 / 0.18);
  --pop-blue: oklch(0.55 0.24 265);
  --pop-blue-hover: oklch(0.60 0.24 265);
  --pop-blue-soft: oklch(0.55 0.24 265 / 0.18);
  --pop-yellow: oklch(0.90 0.19 95);
  --pop-yellow-fg: oklch(0.18 0.02 80);
  --pop-ink: #0a0d14;
  --pop-shadow: 3px 3px 0 var(--pop-ink);
  --pop-shadow-sm: 2px 2px 0 var(--pop-ink);
}

/* ------------------------------------------------------------------ */
/* Light theme — warm-neutral, very low chroma.                       */
/* Applied when [data-theme="light"] is set on <html>.                */
/* ------------------------------------------------------------------ */
html[data-theme="light"] {
  --rd-bg: oklch(0.985 0.003 60);
  --rd-bg-raised: oklch(1 0 0);
  --rd-bg-sunken: oklch(0.965 0.004 60);
  --rd-bg-hover: oklch(0.955 0.005 60);
  --rd-bg-active: oklch(0.93 0.008 60);
  --rd-bg-sidebar: oklch(0.975 0.003 60);

  --rd-fg: oklch(0.20 0.01 60);
  --rd-fg-muted: oklch(0.42 0.008 60);
  --rd-fg-subtle: oklch(0.58 0.008 60);
  --rd-fg-faint: oklch(0.72 0.005 60);

  --rd-border: oklch(0.91 0.004 60);
  --rd-border-strong: oklch(0.84 0.006 60);
  --rd-border-focus: var(--rd-accent);

  --rd-row-alt: oklch(0.975 0.003 60);
}

/* ------------------------------------------------------------------ */
/* Dark theme — cool navy slate. Chroma is bumped enough to read as    */
/* blue-tinted instead of flat black on calibrated displays.           */
/* ------------------------------------------------------------------ */
html[data-theme="dark"] {
  --rd-bg: oklch(0.21 0.028 252);
  --rd-bg-raised: oklch(0.245 0.030 252);
  --rd-bg-sunken: oklch(0.185 0.026 252);
  --rd-bg-hover: oklch(0.275 0.032 252);
  --rd-bg-active: oklch(0.31 0.034 252);
  --rd-bg-sidebar: oklch(0.195 0.028 252);

  --rd-fg: oklch(0.96 0.005 250);
  --rd-fg-muted: oklch(0.76 0.018 250);
  --rd-fg-subtle: oklch(0.60 0.022 250);
  --rd-fg-faint: oklch(0.45 0.022 250);

  --rd-border: oklch(0.33 0.030 252);
  --rd-border-strong: oklch(0.42 0.034 252);
  --rd-border-focus: var(--rd-accent);

  --rd-row-alt: oklch(0.225 0.029 252);

  --rd-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3);
  --rd-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.28);
  --rd-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------------ */
/* Fallback when no data-theme attribute is set. Uses light values so */
/* initial paint matches the in-head theme script before it runs.     */
/* ------------------------------------------------------------------ */
html:not([data-theme]) {
  --rd-bg: oklch(0.985 0.003 60);
  --rd-bg-raised: oklch(1 0 0);
  --rd-bg-sunken: oklch(0.965 0.004 60);
  --rd-bg-hover: oklch(0.955 0.005 60);
  --rd-bg-active: oklch(0.93 0.008 60);
  --rd-bg-sidebar: oklch(0.975 0.003 60);
  --rd-fg: oklch(0.20 0.01 60);
  --rd-fg-muted: oklch(0.42 0.008 60);
  --rd-fg-subtle: oklch(0.58 0.008 60);
  --rd-fg-faint: oklch(0.72 0.005 60);
  --rd-border: oklch(0.91 0.004 60);
  --rd-border-strong: oklch(0.84 0.006 60);
  --rd-border-focus: var(--rd-accent);
  --rd-row-alt: oklch(0.975 0.003 60);
}