/* ============================================================
   compile.guru — Design Tokens
   Colors, typography, spacing, radii, shadows, motion.
   ============================================================ */

/* ------------------------------------------------------------
   FONTS — self-hostable via Google Fonts CDN
   Inter (sans), Source Serif 4 (serif), JetBrains Mono (mono)
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Merriweather:ital,wght@0,400;0,700;0,900;1,400;1,700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---------- COLOR — base scale ---------- */
  /* Cool slate neutrals — warmer than pure gray, reads editorial */
  --slate-50:  #f8f9fb;
  --slate-100: #f1f3f7;
  --slate-200: #e4e7ee;
  --slate-300: #cdd3dd;
  --slate-400: #9ba3b2;
  --slate-500: #6b7380;
  --slate-600: #4a515d;
  --slate-700: #333942;
  --slate-800: #21262d;
  --slate-900: #13171c;
  --slate-950: #0a0d11;

  /* Ember — deep amber accent. Warmer than orange, cleaner than red. */
  --ember-50:  #fdf6ec;
  --ember-100: #faead0;
  --ember-200: #f4d29a;
  --ember-300: #ecb563;
  --ember-400: #e19a3a;
  --ember-500: #c77d1e;   /* primary accent */
  --ember-600: #a76316;
  --ember-700: #834c14;
  --ember-800: #5e3810;
  --ember-900: #3a220b;

  /* Semantic signals (tuned to sit beside ember without clashing) */
  --signal-success: #3f9a6a;
  --signal-warning: #d49414;
  --signal-danger:  #c2453d;
  --signal-info:    #3a7ab8;

  /* Syntax highlighting — light theme */
  --syn-bg:        #f8f9fb;
  --syn-fg:        #21262d;
  --syn-comment:   #6b7380;
  --syn-keyword:   #a76316;   /* ember-600 */
  --syn-string:    #3f7a52;
  --syn-number:    #b8531a;
  --syn-function:  #3a5a8a;
  --syn-type:      #7a3a8a;
  --syn-punct:     #4a515d;
  --syn-variable:  #21262d;
  --syn-tag:       #c2453d;
  --syn-line-hl:   #f1e9d9;

  /* ---------- SEMANTIC COLOR (light, default) ---------- */
  --bg:            var(--slate-50);
  --bg-elevated:   #ffffff;
  --bg-sunken:     var(--slate-100);
  --bg-inline:     var(--slate-100);

  --fg:            var(--slate-900);
  --fg-muted:      var(--slate-600);
  --fg-subtle:     var(--slate-500);
  --fg-faint:      var(--slate-400);
  --fg-on-accent:  #ffffff;

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-accent: var(--ember-500);

  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-600);
  --accent-bg:     var(--ember-50);
  --accent-fg:     var(--ember-700);

  --link:          var(--ember-600);
  --link-hover:    var(--ember-700);
  --link-visited:  var(--ember-800);

  --focus-ring:    var(--ember-400);
  --selection:     var(--ember-100);

  /* ---------- TYPOGRAPHY — families ---------- */
  --font-sans:   'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:  'Merriweather', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (1.200 minor third, tuned) ---------- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   17px;  /* article body */
  --text-lg:   19px;
  --text-xl:   22px;
  --text-2xl:  27px;
  --text-3xl:  34px;
  --text-4xl:  44px;
  --text-5xl:  56px;
  --text-6xl:  72px;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;  /* article prose */
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ---------- SPACING (4px base, fibonacci-ish) ---------- */
  --space-0:  0;
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Container widths */
  --container-sm:   640px;
  --container-md:   768px;
  --container-prose: 680px;   /* article measure — ~66ch at 17px */
  --container-lg:   960px;
  --container-xl:   1120px;
  --container-2xl:  1280px;

  /* ---------- RADIUS ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ---------- SHADOWS (subtle, editorial) ---------- */
  --shadow-xs: 0 1px 1px rgba(15, 23, 32, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 32, 0.06), 0 1px 1px rgba(15, 23, 32, 0.03);
  --shadow-md: 0 4px 10px -2px rgba(15, 23, 32, 0.08), 0 2px 4px -1px rgba(15, 23, 32, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(15, 23, 32, 0.10), 0 4px 8px -2px rgba(15, 23, 32, 0.05);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 32, 0.14);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 45%, transparent);
  --shadow-inner: inset 0 1px 2px rgba(15, 23, 32, 0.06);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:   cubic-bezier(0.32, 0.72, 0, 1);   /* snappy but settled */

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --dur-slower:  520ms;

  /* ---------- Z ---------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;
}

/* ---------- DARK MODE ---------- */
:root[data-theme='dark'],
:root.dark {
  --bg:            var(--slate-950);
  --bg-elevated:   var(--slate-900);
  --bg-sunken:     #070a0d;
  --bg-inline:     var(--slate-800);

  --fg:            var(--slate-100);
  --fg-muted:      var(--slate-300);
  --fg-subtle:     var(--slate-400);
  --fg-faint:      var(--slate-500);

  --border:        #252b34;
  --border-strong: var(--slate-700);

  --accent:        var(--ember-400);
  --accent-hover:  var(--ember-300);
  --accent-bg:     color-mix(in srgb, var(--ember-500) 16%, transparent);
  --accent-fg:     var(--ember-200);

  --link:          var(--ember-300);
  --link-hover:    var(--ember-200);
  --link-visited:  var(--ember-400);

  --focus-ring:    var(--ember-400);
  --selection:     color-mix(in srgb, var(--ember-500) 35%, transparent);

  /* Syntax — dark theme */
  --syn-bg:        #0d1117;
  --syn-fg:        #e4e7ee;
  --syn-comment:   #6b7380;
  --syn-keyword:   #e19a3a;   /* ember-400 */
  --syn-string:    #7fc39a;
  --syn-number:    #f4b074;
  --syn-function:  #8bb0dc;
  --syn-type:      #c29bd0;
  --syn-punct:     #9ba3b2;
  --syn-variable:  #e4e7ee;
  --syn-tag:       #e07d75;
  --syn-line-hl:   #1a1d24;

  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY — apply via selectors or utility classes
   ============================================================ */

body, .t-body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: var(--leading-normal);
  color:       var(--fg);
  background:  var(--bg);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); color: var(--fg); }

/* --- Display / Headings (serif for editorial feel) --- */
.t-display, h1.display {
  font-family: var(--font-serif);
  font-size:   var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg);
}

h1, .t-h1 {
  font-family: var(--font-serif);
  font-size:   var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}
h2, .t-h2 {
  font-family: var(--font-serif);
  font-size:   var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-size:   var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-size:   var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: 600;
}

/* --- Prose body (long-form article) --- */
.t-prose, .prose p {
  font-family: var(--font-serif);
  font-size:   var(--text-md);
  line-height: var(--leading-relaxed);
  color:       var(--fg);
  text-wrap:   pretty;
}

/* --- UI body (interface copy) --- */
.t-ui {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  line-height: var(--leading-normal);
}

/* --- Lead / deck --- */
.t-lead {
  font-family: var(--font-serif);
  font-size:   var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
  font-weight: 400;
  font-style: italic;
}

/* --- Meta / eyebrow / overline --- */
.t-meta {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 500;
}

/* --- Code --- */
code, .t-code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: 'calt' 0;
}
:not(pre) > code {
  background: var(--bg-inline);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--accent-fg);
  border: 1px solid var(--border);
}

pre, .t-pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  background: var(--syn-bg);
  color: var(--syn-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
}

/* --- Links --- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --- Blockquote --- */
blockquote, .t-quote {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  font-style: italic;
  color: var(--fg-muted);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
}

/* --- Caption --- */
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  line-height: var(--leading-normal);
}

/* --- Labels --- */
.t-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg);
}

/* ============================================================
   UTILITY HELPERS
   ============================================================ */
.u-mono { font-family: var(--font-mono); }
.u-serif { font-family: var(--font-serif); }
.u-sans { font-family: var(--font-sans); }
.u-muted { color: var(--fg-muted); }
.u-subtle { color: var(--fg-subtle); }
.u-accent { color: var(--accent); }

.u-dots {
  background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
  background-size: 16px 16px;
}
.u-grid {
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
}