/* =========================================================================
   Mustafa Şahin — Design System
   colors_and_type.css
   Token layer: raw scales → semantic vars → element defaults.
   ========================================================================= */

/* ---------- Webfonts (Google Fonts CDN) ------------------------------------ */
/* Bricolage Grotesque: editorial display (variable, optical sizing)          */
/* Geist:               UI / body sans                                        */
/* Geist Mono:          code, metadata, labels, eyebrows                      */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Raw color scale --------------------------------------------- */
  /* Ink (near-black, warm undertone). Mustafa's signature dark surface.      */
  --ink-1000: #050506;     /* deepest, used for true-black moments           */
  --ink-950:  #0A0A0B;     /* primary canvas                                 */
  --ink-900:  #101012;     /* raised surfaces                                */
  --ink-850:  #161618;     /* card / panel                                   */
  --ink-800:  #1D1D20;     /* hover / pressed                                */
  --ink-700:  #2A2A2E;     /* border on dark                                 */
  --ink-600:  #3D3D43;     /* divider strong                                 */
  --ink-500:  #5A5A62;     /* muted icon                                     */
  --ink-400:  #7A7A83;     /* secondary text on dark                         */
  --ink-300:  #A0A0A8;     /* tertiary text                                  */
  --ink-200:  #C9C9CE;     /* high-emphasis muted                            */
  --ink-100:  #E4E2DC;     /* paper-on-ink text                              */

  /* Paper (warm off-white, the light surface)                                */
  --paper-50:  #FBF9F3;
  --paper-100: #F5F1EA;    /* primary light canvas                           */
  --paper-200: #ECE6D8;
  --paper-300: #DDD4BF;

  /* Signal — signature accent. Molten orange. Used sparingly.                */
  --signal-50:  #FFEEE3;
  --signal-100: #FFD7BC;
  --signal-300: #FF8E54;
  --signal-500: #FF5B14;   /* primary accent                                 */
  --signal-600: #E94908;
  --signal-700: #B83806;

  /* Volt — electric lime, used only for "live" / code-output / status.       */
  --volt-500: #B2F500;
  --volt-600: #8FCC00;

  /* Plasma — cool blue, used rarely for link-states in light theme.          */
  --plasma-500: #2D5BFF;

  /* ---------- Typography: families ---------------------------------------- */
  --font-display: "Bricolage Grotesque", "Times New Roman", serif;
  --font-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ---------- Typography: scale ------------------------------------------- */
  /* Designed for a fluid 1280–1920 viewport range.                           */
  --fs-mono-xs:  11px;     /* eyebrow labels, mono                            */
  --fs-mono-sm:  13px;     /* mono captions, code                             */
  --fs-mono-md:  14px;     /* nav, mono buttons                               */

  --fs-xs:   12px;         /* legal / aside                                  */
  --fs-sm:   14px;
  --fs-md:   16px;         /* body                                           */
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  84px;
  --fs-6xl:  128px;        /* hero display, clamp downward on mobile         */
  --fs-7xl:  184px;        /* mega-marquee                                   */

  --lh-tight:   1.02;
  --lh-snug:    1.12;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  --ls-display: -0.025em;  /* tighten large display                          */
  --ls-mono:    0.04em;    /* loosen mono                                    */
  --ls-eyebrow: 0.14em;    /* widely-tracked uppercase mono                  */

  /* ---------- Spacing / layout (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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --gutter:   clamp(20px, 4vw, 56px);
  --max-content: 1440px;

  /* ---------- Radius ------------------------------------------------------ */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;          /* default for buttons / inputs (sharp, editorial)*/
  --radius-3: 8px;
  --radius-4: 14px;         /* cards                                        */
  --radius-pill: 999px;

  /* ---------- Borders ----------------------------------------------------- */
  --border-hairline: 1px solid var(--ink-700);
  --border-strong:   1px solid var(--ink-600);
  --border-paper:    1px solid rgba(10, 10, 11, 0.10);

  /* ---------- Shadow / elevation ----------------------------------------- */
  /* Used sparingly. Editorial layouts lean on type + spacing, not shadows.   */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-2: 0 2px 0 rgba(0,0,0,0.5), 0 12px 32px -8px rgba(0,0,0,0.55);
  --shadow-3: 0 24px 60px -16px rgba(0,0,0,0.6), 0 2px 0 rgba(0,0,0,0.6);
  --shadow-signal: 0 0 0 1px var(--signal-500), 0 12px 32px -10px rgba(255,91,20,0.5);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---------- Motion ------------------------------------------------------ */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;
  --dur-grand:  900ms;       /* hero text reveals                            */

  /* ---------- Semantic surface aliases (default = dark) ------------------ */
  --bg:           var(--ink-950);
  --bg-raised:    var(--ink-900);
  --bg-card:      var(--ink-850);
  --bg-hover:     var(--ink-800);

  --fg:           var(--ink-100);
  --fg-muted:     var(--ink-300);
  --fg-faint:     var(--ink-400);
  --fg-icon:      var(--ink-200);
  --fg-inverse:   var(--ink-950);

  --border:       var(--ink-700);
  --border-soft:  var(--ink-800);
  --border-loud:  var(--ink-600);

  --accent:           var(--signal-500);
  --accent-hover:     var(--signal-600);
  --accent-faint:     rgba(255, 91, 20, 0.12);
  --accent-fg:        var(--ink-1000);    /* text on accent fill              */

  --live:             var(--volt-500);

  /* Selection */
  --selection-bg: var(--signal-500);
  --selection-fg: var(--ink-1000);
}

/* ---------- Light theme override ----------------------------------------- */
[data-theme="light"] {
  --bg:           var(--paper-100);
  --bg-raised:    var(--paper-50);
  --bg-card:      #FFFFFF;
  --bg-hover:     var(--paper-200);

  --fg:           var(--ink-1000);
  --fg-muted:     var(--ink-700);
  --fg-faint:     var(--ink-500);
  --fg-icon:      var(--ink-900);
  --fg-inverse:   var(--paper-100);

  --border:       rgba(10,10,11,0.10);
  --border-soft:  rgba(10,10,11,0.06);
  --border-loud:  rgba(10,10,11,0.18);

  --accent-fg:    var(--paper-50);
}

/* =========================================================================
   Element defaults — minimal reset + base typography
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "cv11"; /* Geist's stylistic set + alt 1     */
}

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

/* ---------- Semantic typography ----------------------------------------- */

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-variation-settings: "opsz" 96;
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 84px);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  font-variation-settings: "opsz" 64;
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 32;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0;
}

p, .body {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}
.body-lg {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
}
.body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* Mono labels — used everywhere as eyebrows, section numbers, captions      */
.eyebrow,
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: var(--radius-1);
  border: var(--border-hairline);
  color: var(--accent);
}

/* Section number — large numeric counter used to mark chapters             */
.section-number {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  letter-spacing: var(--ls-mono);
  color: var(--fg-faint);
  font-feature-settings: "tnum";
}

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