/* ============================================================
   SmartX Ops — Design System foundations
   Single source of truth: tokens, themes, base type.
   Architecture: three layers — primitives → semantic → usage.
   Personality: precision instruments. Calm authority.
   Monochrome ink/paper + ONE accent (cooled teal). Hard edges.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   LAYER 1 — PRIMITIVES
   Raw palette + raw scales. Never referenced directly in UI;
   semantic tokens map onto these.
   ============================================================ */
:root {
  /* --- Paper (the light base) --- */
  --c-white:      #ffffff;
  --c-paper:      #f6f7f9;
  --c-paper-deep: #eceef2;

  /* --- Ink ramp (cool, slightly blue-grey) --- */
  --c-ink-950: #0e1420;  /* primary text / dark-section background */
  --c-ink-900: #161d2b;
  --c-ink-800: #1b2330;  /* raised surface on dark */
  --c-ink-700: #2a3342;
  --c-ink-600: #3a4453;  /* secondary text */
  --c-ink-500: #565f6e;
  --c-ink-400: #717c8c;  /* tertiary text, captions */
  --c-ink-300: #98a1ae;  /* disabled, placeholder */
  --c-ink-200: #c2c8d0;
  --c-ink-150: #d8dce2;  /* strong hairline */
  --c-ink-100: #e6e9ed;  /* hairline */
  --c-ink-50:  #eff1f4;

  /* --- Accent: cooled teal (the single signal) --- */
  --c-teal-700: #0a6056;  /* deep */
  --c-teal-600: #0c7568;  /* text-safe on paper (AA, ~5.1:1) */
  --c-teal-500: #0e8a7d;  /* THE signal — fills, marks, large type */
  --c-teal-400: #1ba596;
  --c-teal-300: #34c4b0;  /* accent on dark surfaces */
  --c-teal-100: #d6ebe8;  /* faint tint */
  --c-teal-50:  #eaf4f2;

  /* --- Functional: form errors only (kept desaturated) --- */
  --c-red-600: #9a2a1d;
  --c-red-500: #b42318;
  --c-red-100: #f6e4e1;

  /* --- Type families --- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Type scale: --fs-meta (12) → --fs-8xl (80) --- */
  --fs-meta: 0.75rem;    /* 12 — mono eyebrows, labels, captions */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 — body */
  --fs-md:   1.125rem;   /* 18 — lead / large body */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  1.875rem;   /* 30 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  2.75rem;    /* 44 */
  --fs-5xl:  3.25rem;    /* 52 */
  --fs-6xl:  3.75rem;    /* 60 */
  --fs-7xl:  4.25rem;    /* 68 */
  --fs-8xl:  5rem;       /* 80 — hero display */

  /* --- Line height --- */
  --lh-tight:  1.04;  /* @kind other */  /* display */
  --lh-snug:   1.16;  /* @kind other */
  --lh-normal: 1.5;   /* @kind other */
  --lh-prose:  1.65;  /* @kind other */

  /* --- Tracking --- */
  --track-display: -0.02em;  /* @kind other */  /* tight on display */
  --track-tight:   -0.01em;  /* @kind other */
  --track-normal:  0;        /* @kind other */
  --track-mono:    0.01em;   /* @kind other */
  --track-eyebrow: 0.18em;   /* @kind other */  /* the mono eyebrow signal */

  /* --- Spacing (4px base; no half-steps) --- */
  --sp-0:  0px;   /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* --- Radius: HARD EDGES (0–4px only). Pill for status dots/tags. --- */
  --r-0:    0px;
  --r-1:    2px;
  --r-2:    4px;
  --r-pill: 999px;

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);  /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);   /* @kind other */
  --dur-1: 180ms;  /* @kind other */  /* micro / hover */
  --dur-2: 240ms;  /* @kind other */  /* default reveal */
  --dur-3: 320ms;  /* @kind other */  /* panel */
  --dur-4: 360ms;  /* @kind other */  /* section */
  --dur-hero: 900ms;  /* @kind other */  /* the one big hero rise */

  /* --- Elevation (restrained; lines do most of the work) --- */
  --shadow-1: 0 1px 2px rgba(14,20,32,0.05), 0 1px 1px rgba(14,20,32,0.04);
  --shadow-2: 0 12px 32px rgba(14,20,32,0.10), 0 2px 8px rgba(14,20,32,0.06);

  /* --- Usage: layout rhythm --- */
  --container:    78rem;   /* @kind other */  /* max content width */
  --measure:      65ch;    /* @kind other */  /* prose measure */
  --gutter:       clamp(1.5rem, 4vw, 3rem);  /* @kind spacing */
  --nav-h:        64px;    /* @kind spacing */
  --section-pad:  clamp(4rem, 9vw, 10rem);   /* @kind spacing */
}

/* ============================================================
   LAYER 2 — SEMANTIC
   Role-based tokens. UI references THESE. Re-mapped per theme.
   Light is the default (paper). [data-theme="dark"] = full-bleed ink.
   ============================================================ */
:root,
[data-theme="light"] {
  color: var(--c-ink-950);
  --bg:            var(--c-paper);
  --bg-raised:     var(--c-white);
  --bg-sunken:     var(--c-paper-deep);
  --bg-inverse:    var(--c-ink-950);

  --text:          var(--c-ink-950);
  --text-secondary:var(--c-ink-600);
  --text-muted:    var(--c-ink-400);
  --text-inverse:  var(--c-paper);

  --border:        var(--c-ink-100);
  --border-strong: var(--c-ink-150);

  --accent:         var(--c-teal-500);
  --accent-text:    var(--c-teal-600);  /* AA on paper */
  --accent-contrast:var(--c-white);     /* text/icon on an accent fill */
  --accent-tint:    var(--c-teal-50);

  --danger:        var(--c-red-500);
  --danger-text:   var(--c-red-600);

  --focus:         var(--c-teal-500);
  --focus-ring:    0 0 0 2px var(--c-white), 0 0 0 4px var(--c-teal-500);

  --grid-line:     rgba(14,20,32,0.06);  /* blueprint texture on light */
  --scrim:         rgba(14,20,32,0.45);
}

[data-theme="dark"] {
  color: var(--c-paper);
  --bg:            var(--c-ink-950);
  --bg-raised:     var(--c-ink-800);
  --bg-sunken:     var(--c-ink-900);
  --bg-inverse:    var(--c-paper);

  --text:          var(--c-paper);
  --text-secondary:var(--c-ink-300);
  --text-muted:    var(--c-ink-400);
  --text-inverse:  var(--c-ink-950);

  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);

  --accent:         var(--c-teal-300);
  --accent-text:    var(--c-teal-300);
  --accent-contrast:var(--c-ink-950);
  --accent-tint:    rgba(52,196,176,0.14);

  --danger:        #e8857a;
  --danger-text:   #e8857a;

  --focus:         var(--c-teal-300);
  --focus-ring:    0 0 0 2px var(--c-ink-950), 0 0 0 4px var(--c-teal-300);

  --grid-line:     rgba(255,255,255,0.06);
  --scrim:         rgba(14,20,32,0.6);
}

/* ============================================================
   LAYER 3 — BASE / USAGE
   Element defaults + the named type roles UI composes with.
   ============================================================ */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
body { margin: 0; }

* { box-sizing: border-box; }

::selection { background: var(--c-teal-100); color: var(--c-ink-950); }

:where(a) { color: var(--accent-text); text-decoration: none; }
:where(a):hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:where(:focus-visible) { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }

/* --- Display (Space Grotesk) --- */
.t-display, .t-h1, .t-h2, .t-h3 { font-family: var(--font-display); font-weight: 600; }
.t-display-2xl { font: 600 var(--fs-8xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; }
.t-display-xl  { font: 600 var(--fs-7xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; }
.t-display     { font: 600 var(--fs-6xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; }
.t-h1 { font-size: var(--fs-5xl); line-height: var(--lh-snug); letter-spacing: var(--track-tight); text-wrap: balance; }
.t-h2 { font-size: var(--fs-3xl); line-height: var(--lh-snug); letter-spacing: var(--track-tight); text-wrap: balance; }
.t-h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug); letter-spacing: var(--track-tight); }

/* --- Body (IBM Plex Sans) --- */
.t-lead { font: 400 var(--fs-md)/var(--lh-prose) var(--font-sans); color: var(--text-secondary); text-wrap: pretty; }
.t-body { font: 400 var(--fs-base)/var(--lh-normal) var(--font-sans); text-wrap: pretty; }
.t-body-sm { font: 400 var(--fs-sm)/var(--lh-normal) var(--font-sans); }
.t-prose { max-width: var(--measure); font: 400 var(--fs-base)/var(--lh-prose) var(--font-sans); text-wrap: pretty; }

/* --- Mono (IBM Plex Mono) — the brand signal --- */
.t-eyebrow {
  font: 500 var(--fs-meta)/1 var(--font-mono);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
}
.t-label {
  font: 500 var(--fs-meta)/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.t-mono { font: 400 var(--fs-sm)/var(--lh-normal) var(--font-mono); letter-spacing: var(--track-mono); }
.t-num  { font: 600 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}