/* ============================================================
   ModernSK — Colors & Type Tokens  (ported from Claude Design)
   Tactile, dark-first design system.
   Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.
   ------------------------------------------------------------
   Single source of truth. Every component reads from here.
   ------------------------------------------------------------
   Fonts are NOT loaded here. The branded faces (Anta / Onest /
   Geist Mono) live in the optional `modern-sk/fonts.css`. The
   --font-* chains below degrade to system-ui when that file is
   not imported, and an app can override the tokens to remap any
   typeface without touching this file.
   ============================================================ */

:root {
  /* ---------- BRAND ---------- */
  --lime:          #bef264;
  --lime-bright:   #d4ff7a;
  --lime-deep:     #a8e04a;
  --lime-ink:      #1c2a08;

  --ember:         #e9572b;
  --ember-bright:  #ff7a52;
  --ember-deep:    #c4421d;

  /* ---------- NEUTRALS (warm-tinted) ---------- */
  --ink:           #0f100d;
  --ink-deep:      #090a07;
  --ink-raised:    #16170f;
  --steel-900:     #1c1d16;
  --steel-800:     #22241b;
  --steel-700:     #2a2c22;
  --steel-600:     #33342b;
  --steel-500:     #44463a;
  --steel-400:     #5a5c4d;

  /* ---------- TEXT (on dark) ---------- */
  --fg-1:          #f3f4ee;
  --fg-2:          #a7a99c;
  --fg-3:          #6f7164;
  --fg-on-lime:    #1c2a08;
  --fg-on-ember:   #ffffff;

  /* ---------- HAIRLINES & STROKES ---------- */
  --hair:          rgba(255,255,255,0.08);
  --hair-strong:   rgba(255,255,255,0.14);
  --edge-top:      rgba(255,255,255,0.10);
  --edge-inset:    rgba(0,0,0,0.5);

  /* ---------- SEMANTIC ---------- */
  --success:       #bef264;
  --warning:       #e6a93c;
  --danger:        #e9572b;
  --info:          #6db3f2;

  --success-bg:    rgba(190,242,100,0.12);
  --warning-bg:    rgba(230,169,60,0.12);
  --danger-bg:     rgba(233,87,43,0.14);
  --info-bg:       rgba(109,179,242,0.12);

  /* ---------- TYPE ----------
     Anta is the GLOBAL typeface. Onest / Geist Mono are fallbacks. */
  --font-display: 'Anta', 'Onest', system-ui, sans-serif;
  --font-sans:    'Anta', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Anta', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

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

  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   800;

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --track-tight: -0.03em;
  --track-snug:  -0.01em;
  --track-wide:  0.02em;
  --track-caps:  0.24em;

  /* ---------- RADII ---------- */
  --r-xs:   3px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   11px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- CONTROL SIZING (compact, global) ---------- */
  --ctl-pad-y:    6px;
  --ctl-pad-x:    18px;
  --ctl-font:     14px;
  --field-pad-y:  7px;
  --field-pad-x:  13px;
  --switch-w:     42px;
  --switch-h:     22px;
  --switch-knob:  16px;
  --switch-gap:   3px;
  --seg-pad-y:    4px;
  --stepper-h:    30px;

  /* ---------- ELEVATION / TACTILE SHADOWS ---------- */
  --shadow-raised:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 2px 3px rgba(0,0,0,0.5),
    0 6px 16px rgba(0,0,0,0.35);
  --shadow-raised-hover:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 3px 5px rgba(0,0,0,0.5),
    0 10px 24px rgba(0,0,0,0.4);
  --shadow-pressed:
    0 2px 5px rgba(0,0,0,0.6) inset,
    0 1px 0 rgba(255,255,255,0.04);
  --shadow-inset-well:
    0 2px 4px rgba(0,0,0,0.45) inset,
    0 1px 0 rgba(255,255,255,0.05);
  --shadow-card:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 12px 32px rgba(0,0,0,0.45),
    0 2px 6px rgba(0,0,0,0.35);
  --shadow-window:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 30px 80px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.4);
  --focus-ring:        0 0 0 3px rgba(190,242,100,0.35);
  --focus-ring-ember:  0 0 0 3px rgba(233,87,43,0.32);
  --glow-lime:         0 6px 22px rgba(190,242,100,0.28);

  /* ---------- GRADIENTS (gloss recipes) ---------- */
  --grad-key:     linear-gradient(180deg, #2f3027, #24251e);
  --grad-key-hover:linear-gradient(180deg, #36372e, #2b2c23);
  --grad-key-down: linear-gradient(180deg, #1d1e17, #232419);
  --grad-primary: linear-gradient(180deg, #cdf972, var(--lime) 55%, #b1e655);
  --grad-primary-down: linear-gradient(180deg, var(--lime-deep), var(--lime));
  --grad-ember:   linear-gradient(180deg, #f86f49, var(--ember) 55%, #d34c22);
  --grad-ember-down: linear-gradient(180deg, var(--ember-deep), var(--ember));
  --grad-titlebar:linear-gradient(180deg, #26271f, #1c1d16);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-snap:  cubic-bezier(.2,.9,.3,1.2);
  --dur-press:  60ms;
  --dur-quick:  120ms;
  --dur-base:   200ms;

  /* ---------- THE FELT (background) ---------- */
  --bg-glow:
    radial-gradient(120% 80% at 50% -10%, rgba(190,242,100,0.10), transparent 55%),
    radial-gradient(90% 70% at 85% 110%, rgba(233,87,43,0.06), transparent 60%),
    radial-gradient(100% 100% at 50% 50%, #16170f 0%, #0f100d 60%, #090a07 100%);
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='2.8' offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-size: 200px;
  --grain-opacity: 0.45;

  /* ---------- SPINNER GROOVE ----------
     Solid carved channel — flat base felt, sunk by an SVG inner shadow,
     exactly like the switch well (no gradient). */
  --spin-track: #23241c;
}

/* ============================================================
   THE FELT — the one global background.
   ============================================================ */
.modern-sk-felt {
  position: relative;
  background-color: var(--ink);
  background-image: var(--bg-glow);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--fg-1);
}
.modern-sk-felt::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain-url);
  background-size: var(--grain-size) var(--grain-size);
  background-repeat: repeat;
  opacity: var(--grain-opacity);
  mix-blend-mode: screen;
}

/* ============================================================
   LIGHT MODE — warm off-white "paper", Sierra-style gloss.
   ============================================================ */
[data-theme="light"] {
  --ink:           #ecece3;
  --ink-deep:      #deded2;
  --ink-raised:    #f6f6ef;
  --steel-900:     #ffffff;
  --steel-800:     #f4f4ec;
  --steel-700:     #e9e9df;
  --steel-600:     #deded2;
  --steel-500:     #c8c9bc;
  --steel-400:     #aeb0a2;

  --fg-1:          #1d1e16;
  --fg-2:          #5b5d50;
  --fg-3:          #8a8c7d;

  --hair:          rgba(0,0,0,0.10);
  --hair-strong:   rgba(0,0,0,0.16);
  --edge-top:      rgba(255,255,255,0.9);
  --edge-inset:    rgba(0,0,0,0.18);

  --shadow-raised:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 1px 2px rgba(0,0,0,0.12),
    0 4px 10px rgba(0,0,0,0.10);
  --shadow-raised-hover:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 2px 4px rgba(0,0,0,0.14),
    0 8px 18px rgba(0,0,0,0.12);
  --shadow-pressed:
    0 2px 4px rgba(0,0,0,0.18) inset;
  --shadow-inset-well:
    0 2px 3px rgba(0,0,0,0.10) inset,
    0 1px 0 rgba(255,255,255,0.8);
  --shadow-card:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 10px 28px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.08);
  --shadow-window:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 24px 64px rgba(0,0,0,0.22),
    0 2px 8px rgba(0,0,0,0.12);

  --grad-key:      linear-gradient(180deg, #ffffff, #ecece2);
  --grad-key-hover:linear-gradient(180deg, #ffffff, #f3f3ea);
  --grad-key-down: linear-gradient(180deg, #e4e4d8, #ededdf);
  --grad-titlebar: linear-gradient(180deg, #f4f4ec, #e7e7dd);

  --bg-glow:
    radial-gradient(120% 80% at 50% -10%, rgba(190,242,100,0.18), transparent 55%),
    radial-gradient(90% 70% at 85% 110%, rgba(233,87,43,0.08), transparent 60%),
    radial-gradient(100% 100% at 50% 50%, #f2f2ea 0%, #ecece3 60%, #e2e2d6 100%);

  /* carved groove on warm paper — flat base, sunk by inner shadow */
  --spin-track: #dcdcd2;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.modern-sk-display {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-5xl); line-height: var(--lh-tight);
  letter-spacing: -0.01em; color: var(--fg-1);
}
.modern-sk-h1 {
  font-family: var(--font-sans); font-weight: var(--w-bold);
  font-size: var(--text-3xl); line-height: var(--lh-snug);
  letter-spacing: var(--track-snug); color: var(--fg-1);
}
.modern-sk-h2 {
  font-family: var(--font-sans); font-weight: var(--w-semibold);
  font-size: var(--text-2xl); line-height: var(--lh-snug);
  letter-spacing: var(--track-snug); color: var(--fg-1);
}
.modern-sk-h3 {
  font-family: var(--font-sans); font-weight: var(--w-semibold);
  font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--fg-1);
}
.modern-sk-body {
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: var(--text-base); line-height: var(--lh-normal); color: var(--fg-2);
}
.modern-sk-body-strong { font-weight: var(--w-medium); color: var(--fg-1); }
.modern-sk-caption {
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: var(--text-sm); color: var(--fg-3);
}
.modern-sk-label {
  font-family: var(--font-sans); font-weight: var(--w-semibold);
  font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--fg-3);
}
.modern-sk-mono {
  font-family: var(--font-mono); font-weight: var(--w-regular);
  font-size: var(--text-sm); color: var(--fg-2);
}