/* Cortex Design Tokens
 *
 * Vanilla CSS adaptation of the shadcn/ui design language. Cortex stays
 * vanilla (no React, no Tailwind), but every token here mirrors the
 * shadcn defaults so we can lift component patterns 1:1 without
 * inventing our own palette.
 *
 * Colour values are expressed in OKLCH (perceptually uniform; lets us
 * derive consistent hover/active shades by tweaking L). Two themes:
 * `cortex-minimal` (light, default) and `cortex-terminal` (dark).
 *
 * USAGE: components consume only these tokens — no hex literals, no
 * magic numbers. New tokens land here first; styles.css and any
 * components.css are pure consumers.
 */

:root,
[data-theme="cortex-minimal"] {
  color-scheme: light;

  /* ===== Surface / Background ===== */
  --color-background:        oklch(0.974 0.005 95);    /* page bg, warm off-white */
  --color-foreground:        oklch(0.180 0.005 92);    /* primary text */
  --color-surface:           oklch(1.000 0     0);     /* cards, panels */
  --color-surface-subtle:    oklch(0.978 0.004 100);   /* hover/alt rows */
  --color-surface-elevated:  oklch(0.992 0.002 95);    /* modals, popovers */
  --color-surface-selected:  oklch(0.960 0.012 145);   /* selected list row */

  /* ===== Text variants ===== */
  --color-text:              var(--color-foreground);
  --color-text-muted:        oklch(0.460 0.008 110);   /* secondary copy */
  --color-text-placeholder:  oklch(0.700 0.010 110);   /* input placeholder */
  --color-text-disabled:     oklch(0.760 0.005 110);   /* disabled fg */
  --color-text-on-accent:    oklch(1.000 0     0);

  /* ===== Borders / Inputs ===== */
  --color-border:            oklch(0.860 0.006 110);
  --color-border-strong:     oklch(0.760 0.008 110);
  --color-border-input:      oklch(0.860 0.006 110);

  /* ===== Brand accent (Cortex green) ===== */
  --color-accent:            oklch(0.435 0.073 173);   /* #176b5a */
  --color-accent-hover:      oklch(0.375 0.069 175);
  --color-accent-active:     oklch(0.325 0.064 175);
  --color-accent-soft:       oklch(0.950 0.025 175);   /* accent-tinted bg */
  --color-accent-foreground: var(--color-text-on-accent);

  /* ===== Focus ring (used by every interactive element) ===== */
  --color-ring:              oklch(0.435 0.073 173 / 45%);
  --color-ring-offset:       var(--color-background);

  /* ===== Semantic ===== */
  --color-destructive:           oklch(0.577 0.245 27);
  --color-destructive-hover:     oklch(0.512 0.228 27);
  --color-destructive-soft:      oklch(0.960 0.045 28);
  --color-destructive-foreground:oklch(0.985 0     0);

  --color-success:               oklch(0.640 0.150 145);
  --color-success-soft:          oklch(0.950 0.040 145);
  --color-success-foreground:    oklch(0.985 0     0);

  --color-warning:               oklch(0.780 0.150 80);
  --color-warning-soft:          oklch(0.965 0.060 85);
  --color-warning-foreground:    oklch(0.220 0.030 80);

  --color-info:                  oklch(0.640 0.160 230);
  --color-info-soft:             oklch(0.955 0.040 230);
  --color-info-foreground:       oklch(0.985 0     0);

  /* ===== Overlays / Backdrops ===== */
  --color-backdrop:          oklch(0.200 0.005 90 / 30%);

  /* =================================================================
   *  Spacing — 4 px base (matches Tailwind / shadcn)
   * ================================================================= */
  --space-0:    0;
  --space-px:   1px;
  --space-0_5:  2px;
  --space-1:    4px;
  --space-1_5:  6px;
  --space-2:    8px;
  --space-2_5:  10px;
  --space-3:    12px;
  --space-3_5:  14px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* =================================================================
   *  Radius — shadcn defaults
   * ================================================================= */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;   /* default form / button radius */
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* =================================================================
   *  Shadow — shadcn elevation scale
   * ================================================================= */
  --shadow-2xs:   0 1px 0 0 rgb(0 0 0 / 0.04);
  --shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
  --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --shadow-2xl:   0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Legacy aliases for code still using --shadow-panel/layer/launch */
  --shadow-panel:  var(--shadow-xs);
  --shadow-layer:  var(--shadow-xl);
  --shadow-launch: var(--shadow-xl);

  /* =================================================================
   *  Typography
   * ================================================================= */
  --font-sans:  Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;
  /* Legacy alias */
  --font-ui: var(--font-sans);

  --text-2xs:   10px;
  --text-xs:    12px;
  --text-sm:    13px;
  --text-md:    14px;
  --text-base:  15px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   28px;
  --text-4xl:   36px;

  --leading-tight:    1.25;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.9;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* =================================================================
   *  Motion
   * ================================================================= */
  --duration-instant: 75ms;
  --duration-fast:    150ms;
  --duration-normal:  220ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;

  --ease-linear:  linear;
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Legacy aliases */
  --motion-layer:    var(--duration-normal);
  --motion-backdrop: 220ms;
  --motion-shift:    10px;
  --motion-ease:     var(--ease-in-out);

  /* =================================================================
   *  Z-Index scale (numeric steps of 10)
   * ================================================================= */
  --z-base:             0;
  --z-sticky:           10;
  --z-fixed:            20;
  --z-dropdown:         30;
  --z-popover:          40;
  --z-modal-backdrop:   50;
  --z-modal:            60;
  --z-toast:            70;
  --z-tooltip:          80;
  --z-debug:            99;

  /* =================================================================
   *  Touch / hit-target sizes
   * ================================================================= */
  --hit-xs:   24px;   /* compact badge / metadata pill */
  --hit-sm:   28px;   /* compact toolbar icon */
  --hit-md:   36px;   /* default control */
  --hit-lg:   44px;   /* WCAG-recommended mobile minimum */

  /* =================================================================
   *  Icon sizes
   * ================================================================= */
  --icon-2xs: 11px;
  --icon-xs:  13px;
  --icon-sm:  14px;
  --icon-md:  16px;
  --icon-lg:  20px;
  --icon-xl:  24px;
  --icon-2xl: 28px;

  /* =================================================================
   *  Legacy aliases — keep until callers are migrated. Do NOT use
   *  these in new code; reach for the canonical token instead.
   * ================================================================= */
  --color-bg:              var(--color-background);
  --color-accent-contrast: var(--color-text-on-accent);
  --color-focus:           var(--color-accent);
  --color-focus-ring:      var(--color-ring);
  --space-page:            var(--space-6);

  /* Legacy text-size scale — kept at original (11–14 px) to preserve
   * existing density. New components use --text-xs/sm/md/lg from the
   * canonical scale. */
  --text-legacy-xs:  11px;
  --text-legacy-sm:  12px;
  --text-legacy-md:  13px;
  --text-legacy-lg:  14px;

  /* =================================================================
   *  Misc
   * ================================================================= */
  --scroll-gutter-padding: 0.5rem;

  /* Root font + base color */
  font-family: var(--font-sans);
  background: var(--color-background);
  color: var(--color-text);
}

[data-theme="cortex-terminal"] {
  color-scheme: dark;

  --color-background:        oklch(0.176 0.005 145);
  --color-foreground:        oklch(0.945 0.005 100);
  --color-surface:           oklch(0.220 0.005 142);
  --color-surface-subtle:    oklch(0.198 0.005 145);
  --color-surface-elevated:  oklch(0.246 0.006 145);
  --color-surface-selected:  oklch(0.280 0.015 150);

  --color-text:              var(--color-foreground);
  --color-text-muted:        oklch(0.660 0.012 145);
  --color-text-placeholder:  oklch(0.480 0.010 145);
  --color-text-disabled:     oklch(0.420 0.006 145);

  --color-border:            oklch(0.305 0.010 145);
  --color-border-strong:     oklch(0.420 0.012 145);
  --color-border-input:      oklch(0.305 0.010 145);

  --color-accent:            oklch(0.755 0.130 155);
  --color-accent-hover:      oklch(0.815 0.130 155);
  --color-accent-active:     oklch(0.700 0.130 155);
  --color-accent-soft:       oklch(0.290 0.045 155);

  --color-ring:              oklch(0.755 0.130 155 / 35%);

  --color-destructive:           oklch(0.668 0.225 25);
  --color-destructive-hover:     oklch(0.732 0.215 25);
  --color-destructive-soft:      oklch(0.305 0.090 27);
  --color-destructive-foreground:oklch(0.985 0     0);

  --color-success:               oklch(0.720 0.150 145);
  --color-success-soft:          oklch(0.290 0.060 145);

  --color-warning:               oklch(0.810 0.160 80);
  --color-warning-soft:          oklch(0.330 0.080 80);

  --color-info:                  oklch(0.730 0.150 230);
  --color-info-soft:             oklch(0.290 0.075 230);

  --color-backdrop:          oklch(0.080 0.005 145 / 50%);

  --shadow-2xs:   0 1px 0 0 rgb(0 0 0 / 0.35);
  --shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.40);
  --shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.45);
  --shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.50), 0 2px 4px -2px rgb(0 0 0 / 0.50);
  --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.55);
  --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.60), 0 8px 10px -6px rgb(0 0 0 / 0.60);
  --shadow-2xl:   0 25px 50px -12px rgb(0 0 0 / 0.70);
}

/* Honour OS-level motion preferences. Components should compose
 * --duration-* tokens; this clamp neutralises them globally when the
 * user opts out of animations. */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme="cortex-minimal"],
  [data-theme="cortex-terminal"] {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}