/* =========================================================================
   PROMEFY DESIGN SYSTEM — Foundations
   Colors + Type tokens. Light-first, warm-paper base, flame accent.
   ========================================================================= */

/* -------- Fonts -------- */
/* Brand display: Monofrik (uploaded TTF demo files). Used for all hero/headline
   typography. We keep Space Grotesk + JetBrains Mono for body/UI/mono since
   the Monofrik demo files may have a limited character set. */
@font-face {
  font-family: "Monofrik";
  src: url("fonts/Monofrik_Demo.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Monofrik";
  src: url("fonts/Monofrik_Slant_Demo.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

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

:root {
  /* ===========================================================
     COLOR — base scale (warm-leaning B&W)
     =========================================================== */

  /* Surface / paper */
  --paper:        #F5F3EE;   /* primary background — warm off-white */
  --paper-2:      #ECEAE3;   /* secondary surfaces, recessed panels */
  --paper-3:      #DEDBD2;   /* hairline dividers on light */

  /* Ink (foreground) */
  --ink:          #0A0A0A;   /* primary text, dark surface bg */
  --ink-2:        #1A1A1A;   /* secondary dark surface */
  --ink-3:        #2A2A2A;   /* dark surface elevated */

  /* Neutral scale (warm grays) — for both modes */
  --n-50:  #F5F3EE;
  --n-100: #ECEAE3;
  --n-200: #DEDBD2;
  --n-300: #C4C0B5;
  --n-400: #948F83;
  --n-500: #6E6A60;
  --n-600: #4D4A43;
  --n-700: #2E2C28;
  --n-800: #1A1A1A;
  --n-900: #0A0A0A;

  /* ===========================================================
     COLOR — flame accent (Prometheus nod)
     =========================================================== */
  --flame:        #FF6A00;   /* primary accent — buttons, links, focus */
  --flame-hover:  #E85E00;
  --flame-press:  #C44F00;
  --flame-soft:   #FFE2CC;   /* tinted backgrounds */
  --ember:        #FFB627;   /* secondary warm — highlights, callouts */
  --ember-soft:   #FFF1D2;

  /* ===========================================================
     COLOR — semantic
     =========================================================== */
  --fg-1:         var(--ink);            /* primary text */
  --fg-2:         var(--n-600);          /* secondary text */
  --fg-3:         var(--n-500);          /* tertiary, meta, captions */
  --fg-mute:      var(--n-400);          /* disabled, placeholder */
  --fg-invert:    var(--paper);          /* on dark surfaces */

  --bg-1:         var(--paper);          /* primary surface */
  --bg-2:         var(--paper-2);        /* recessed panels, code blocks */
  --bg-3:         var(--paper-3);        /* hover hairlines */
  --bg-invert:    var(--ink);            /* dark hero, code-on-light flip */

  --border-1:     rgba(10, 10, 10, 0.10);
  --border-2:     rgba(10, 10, 10, 0.18);
  --border-3:     rgba(10, 10, 10, 0.32);
  --border-strong:var(--ink);

  --accent:       var(--flame);
  --accent-hover: var(--flame-hover);
  --accent-press: var(--flame-press);
  --accent-soft:  var(--flame-soft);

  --focus-ring:   0 0 0 2px var(--paper), 0 0 0 4px var(--flame);

  /* Status (kept muted; brand stays monochrome+flame) */
  --status-ok:    #1F8A5B;
  --status-warn:  #C97A00;
  --status-err:   #C2392B;
  --status-info:  var(--ink);

  /* ===========================================================
     TYPOGRAPHY — families
     =========================================================== */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
               "Cascadia Mono", Consolas, monospace;
  --font-display: "Monofrik", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* ===========================================================
     TYPOGRAPHY — scale (modular ~1.250, anchored at 16px base)
     =========================================================== */
  --t-xs:    12px;   /* mono labels, code captions */
  --t-sm:    14px;   /* meta, captions, UI chrome */
  --t-base:  16px;   /* body */
  --t-md:    18px;   /* lead paragraph */
  --t-lg:    22px;   /* h5 / strong UI */
  --t-xl:    28px;   /* h4 */
  --t-2xl:   36px;   /* h3 */
  --t-3xl:   48px;   /* h2 */
  --t-4xl:   64px;   /* h1 */
  --t-5xl:   88px;   /* display */
  --t-6xl:  128px;   /* hero / oversized numerals */

  /* Line heights */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking */
  --tr-tight:  -0.02em;   /* large display */
  --tr-snug:   -0.01em;   /* h1-h3 */
  --tr-normal:  0;
  --tr-loose:   0.04em;   /* mono labels */
  --tr-wide:    0.12em;   /* eyebrow caps */

  /* ===========================================================
     SPACING (4px base)
     =========================================================== */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32: 128px;
  --s-40: 160px;

  /* ===========================================================
     RADII — minimal, mostly square / hairline rounding
     =========================================================== */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    6px;     /* default UI radius */
  --r-4:    10px;    /* cards */
  --r-pill: 999px;

  /* ===========================================================
     ELEVATION — restrained, mostly hairline borders
     =========================================================== */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(10,10,10,0.04), 0 0 0 1px var(--border-1);
  --shadow-2: 0 4px 12px -2px rgba(10,10,10,0.06), 0 0 0 1px var(--border-1);
  --shadow-3: 0 16px 32px -8px rgba(10,10,10,0.10), 0 0 0 1px var(--border-1);
  --shadow-flame: 0 0 0 1px var(--flame), 0 8px 24px -8px rgba(255,106,0,0.45);

  /* Inner */
  --shadow-in-1: inset 0 0 0 1px var(--border-1);
  --shadow-in-2: inset 0 1px 0 rgba(255,255,255,0.6),
                 inset 0 -1px 0 rgba(10,10,10,0.05),
                 inset 0 0 0 1px var(--border-1);

  /* ===========================================================
     MOTION — sharp, snappy, technical
     =========================================================== */
  --dur-instant: 60ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
  --dur-cinema:  700ms;

  --ease-out:     cubic-bezier(0.16, 1, 0.30, 1);     /* snappy out */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);     /* crisp two-way */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
  --ease-linear:  linear;

  /* ===========================================================
     LAYOUT
     =========================================================== */
  --container-sm:   640px;
  --container-md:   960px;
  --container-lg:  1200px;
  --container-xl:  1440px;
  --container-max: 1680px;

  --grain-url: url("assets/grain.svg");
}

/* ===========================================================
   DARK MODE — auto-flip (brand is light-first but supports both)
   =========================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-1:     var(--ink);
    --bg-2:     var(--ink-2);
    --bg-3:     var(--ink-3);
    --bg-invert: var(--paper);

    --fg-1:     var(--paper);
    --fg-2:     var(--n-300);
    --fg-3:     var(--n-400);
    --fg-mute:  var(--n-500);
    --fg-invert: var(--ink);

    --border-1: rgba(245, 243, 238, 0.10);
    --border-2: rgba(245, 243, 238, 0.18);
    --border-3: rgba(245, 243, 238, 0.32);
    --border-strong: var(--paper);

    --shadow-1: 0 0 0 1px var(--border-1);
    --shadow-2: 0 4px 12px -2px rgba(0,0,0,0.5), 0 0 0 1px var(--border-1);
    --shadow-3: 0 16px 32px -8px rgba(0,0,0,0.7), 0 0 0 1px var(--border-1);
  }
}

[data-theme="dark"] {
  --bg-1: var(--ink);
  --bg-2: var(--ink-2);
  --bg-3: var(--ink-3);
  --bg-invert: var(--paper);
  --fg-1: var(--paper);
  --fg-2: var(--n-300);
  --fg-3: var(--n-400);
  --fg-mute: var(--n-500);
  --fg-invert: var(--ink);
  --border-1: rgba(245, 243, 238, 0.10);
  --border-2: rgba(245, 243, 238, 0.18);
  --border-3: rgba(245, 243, 238, 0.32);
  --border-strong: var(--paper);
}

/* ===========================================================
   SEMANTIC ELEMENT STYLES
   =========================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-4xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-snug);
}

h2 {
  font-size: var(--t-3xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

h3 {
  font-size: var(--t-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

h4 {
  font-size: var(--t-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

h5 {
  font-size: var(--t-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

h6 {
  font-size: var(--t-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  font-family: var(--font-mono);
}

p {
  margin: 0;
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.display {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--t-6xl);
  font-weight: var(--fw-medium);
  line-height: 0.95;
  letter-spacing: var(--tr-tight);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-loose);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--bg-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-2);
  border: 1px solid var(--border-1);
}

pre {
  background: var(--bg-2);
  padding: var(--s-4);
  border-radius: var(--r-4);
  border: 1px solid var(--border-1);
  overflow-x: auto;
  line-height: var(--lh-normal);
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-2);
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--flame);
  text-decoration-color: var(--flame);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--s-8) 0;
}

::selection {
  background: var(--flame);
  color: var(--paper);
}

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

/* ===========================================================
   UTILITY — grain overlay (brand texture)
   =========================================================== */
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain-url);
  opacity: 0.35;
  mix-blend-mode: multiply;
}