/* Studio Saelix — Shared brand tokens
   Palette pulled from the logo: layered translucent gradients
   from coral → amber → olive → moss.
   Typography: 100% free, served from Google Fonts.
     · Inter Tight   — display + text  (sans, geometric-humanist)
     · Instrument Serif — italic accents (transitional serif w/ character)
     · JetBrains Mono — code, eyebrows, captions */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@200;300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Core palette */
  --saelix-coral:    #f5b8b8;
  --saelix-coral-2:  #ec8d8d;
  --saelix-saffron:  #fca511;
  --saelix-amber:    #f3b80a;
  --saelix-olive:    #c9b916;
  --saelix-moss:     #8fb12b;
  --saelix-moss-deep:#6b8a1f;
  --saelix-forest:   #3e5a14;

  /* Neutrals — warm off-blacks/whites so the palette sits naturally */
  --ink-1000: #0c0d09;   /* near black with a moss undertone */
  --ink-900:  #14160f;
  --ink-800:  #1d1f17;
  --ink-700:  #2a2c22;
  --ink-500:  #6b6f5c;
  --ink-300:  #c9c9bc;
  --ink-200:  #e6e6d8;
  --ink-100:  #f1f0e4;
  --ink-50:   #f8f7ee;   /* paper white */
  --ink-0:    #fbfaf2;

  /* Semantic */
  --bg:       var(--ink-50);
  --bg-deep:  var(--ink-1000);
  --fg:       var(--ink-900);
  --fg-muted: var(--ink-500);
  --rule:     rgba(20, 22, 15, 0.10);
  --rule-deep:rgba(255, 255, 255, 0.10);

  /* Brand gradient (signature) */
  --grad-saelix: linear-gradient(135deg,
    var(--saelix-coral) 0%,
    var(--saelix-saffron) 28%,
    var(--saelix-amber) 50%,
    var(--saelix-olive) 72%,
    var(--saelix-moss) 100%);
  --grad-saelix-soft: linear-gradient(135deg,
    var(--saelix-coral) 0%,
    var(--saelix-saffron) 28%,
    var(--saelix-amber) 50%,
    var(--saelix-olive) 72%,
    var(--saelix-moss) 100%);

  /* Type — 100% free, Google Fonts only */
  --font-display: "Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text:    "Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Instrument Serif", "Cormorant Garamond", Georgia, serif;
}

/* Reset baseline */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

a { color: inherit; text-decoration: none; }

/* Util */
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.tnum { font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; letter-spacing: 0.08em; }