/* =========================================================
   CURVE TOKENS — midcurved design system (accountability app)
   Aligned with rik-code/midcurved-portfolio/src/app/tokens.css
   Accountability lives at middle + right of the curve.
   ========================================================= */

:root {
  color-scheme: light dark;

  /* === Accent — Midcurved yellow === */
  --accent: oklch(0.82 0.20 85);
  --accent-500: var(--accent);
  --accent-600: oklch(from var(--accent) 0.62 c h);
  --accent-700: oklch(from var(--accent) 0.48 c h);

  /* Neutrals — hue 85, chroma near 0 */
  --neutral-0:    oklch(1 0 0);
  --neutral-50:   oklch(0.98 0.004 85);
  --neutral-100:  oklch(0.95 0.006 85);
  --neutral-200:  oklch(0.90 0.008 85);
  --neutral-300:  oklch(0.82 0.010 85);
  --neutral-400:  oklch(0.68 0.012 85);
  --neutral-500:  oklch(0.55 0.014 85);
  --neutral-600:  oklch(0.44 0.014 85);
  --neutral-700:  oklch(0.34 0.012 85);
  --neutral-800:  oklch(0.24 0.010 85);
  --neutral-900:  oklch(0.16 0.008 85);
  --neutral-950:  oklch(0.10 0.006 85);
  --neutral-1000: oklch(0 0 0);

  /* Status */
  --status-info:    oklch(0.68 0.15 240);
  --status-success: oklch(0.70 0.14 155);
  --status-warn:    oklch(0.78 0.14 75);
  --status-danger:  oklch(0.60 0.19 25);

  /* Type families */
  --font-ui:              "Inter", system-ui, -apple-system, sans-serif;
  --font-display-middle:  "Bricolage Grotesque", "Inter", sans-serif;
  --font-display-right:   "Caprasimo", "Bricolage Grotesque", serif;
  --font-mono:            "JetBrains Mono", "Space Mono", ui-monospace, Menlo, monospace;

  /* Elevation */
  --elev-1: 0 1px 2px oklch(0 0 0 / 0.06), 0 1px 3px oklch(0 0 0 / 0.04);
  --elev-2: 0 4px 8px -2px oklch(0 0 0 / 0.10), 0 2px 4px -2px oklch(0 0 0 / 0.06);
  --elev-3: 0 12px 24px -8px oklch(0 0 0 / 0.18), 0 4px 8px -4px oklch(0 0 0 / 0.08);
  --elev-glow: 0 0 40px -8px color-mix(in oklch, var(--accent) 45%, transparent);
  --elev-brutal:    4px 4px 0 0 var(--neutral-1000);
  --elev-brutal-lg: 6px 6px 0 0 var(--neutral-1000);

  /* Liquid glass */
  --glass-subtle-blur:   8px;
  --glass-standard-blur: 22px;
  --glass-hero-blur:     40px;
  --glass-border:   1px solid color-mix(in oklch, var(--neutral-0) 14%, transparent);
  --glass-specular: inset 0 1px 0 color-mix(in oklch, var(--neutral-0) 24%, transparent),
                    inset 0 -1px 0 color-mix(in oklch, var(--neutral-0) 6%, transparent);
}

/* Reduced motion — non-negotiable */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   MODE SKINS — middle (liquid glass) + right (cartoon)
   Accountability does NOT ship the left mode.
   ========================================================= */
[data-mode="middle"] {
  --surface-base:   var(--neutral-950);
  --surface-raised: var(--neutral-900);
  --surface-sunken: var(--neutral-1000);
  --text-primary:   var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-muted:     var(--neutral-400);
  --border-subtle:  var(--neutral-800);
  --border-strong:  var(--neutral-700);
  --font-display:   var(--font-display-middle);
  --radius-default: 1rem;
  --card-shadow:    var(--elev-2);
}

[data-mode="right"] {
  --surface-base:   oklch(0.97 0.04 85);
  --surface-raised: var(--neutral-0);
  --surface-sunken: oklch(0.93 0.05 85);
  --text-primary:   var(--neutral-1000);
  --text-secondary: var(--neutral-800);
  --text-muted:     var(--neutral-600);
  --border-subtle:  var(--neutral-1000);
  --border-strong:  var(--neutral-1000);
  --font-display:   var(--font-display-right);
  --radius-default: 1.5rem;
  --card-shadow:    var(--elev-brutal);
}

/* Liquid glass helper — applied by theme class on middle */
.glass-surface {
  background: color-mix(in oklch, var(--neutral-900) 55%, transparent);
  backdrop-filter: blur(var(--glass-standard-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-standard-blur)) saturate(1.4);
  border: var(--glass-border);
  box-shadow: var(--glass-specular), var(--elev-2);
}

/* Subtle scanline kept for middle — identity nod, reduced opacity */
.scanline-bg {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.01) 2px,
    rgba(255, 255, 255, 0.01) 4px
  );
}

/* Progress ring tracks — exposed as CSS vars so components.js can read them */
[data-mode="middle"] { --ring-track: oklch(0.24 0.010 85); --ring-fill: var(--accent); }
[data-mode="right"]  { --ring-track: oklch(0.90 0.008 85); --ring-fill: var(--neutral-1000); }