/* ============================================================
   fedemeju — Colors & Type
   White Gallery aesthetic + telemetry-precision typography.
   Load this file once at the document root.
   ============================================================ */

/* ---- Webfonts -------------------------------------------------
   We use Geist (sans) and Geist Mono — clean neo-grotesques with
   a technical/engineering feel that pairs well with F1 and gallery
   contexts. Loaded from Google Fonts CDN; local copies live in
   /fonts as a fallback (see fonts/README.md).
   FLAG: this is a substitution. If the artist has a licensed
   wordmark face, drop the .woff2 in /fonts and update --font-sans.
---------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Color: Neutrals (the gallery wall) ---------- */
  --paper:        #FFFFFF;   /* pure gallery white — primary canvas */
  --bone:         #F7F6F2;   /* warm off-white, used for card fields */
  --fog:          #ECEBE6;   /* hairline fills, dividers behind cards */
  --stone:        #D6D4CE;   /* disabled, faint rules */
  --graphite-30:  #B8B5AE;   /* tertiary text */
  --graphite-60:  #6B6A66;   /* secondary text, mono labels */
  --graphite-80:  #2E2D2B;   /* body text on white */
  --ink:          #0A0A0A;   /* near-black, headlines, ink */

  /* ---------- Color: Accent (used sparsely, like an apex marker) ---------- */
  --signal:       #E63329;   /* "signal red" — focus rings, kbd active, mark of attention */
  --signal-soft:  #FBE3E1;   /* signal tinted background */

  /* ---------- Color: Status (semantic, used rarely) ---------- */
  --ok:           #1F7A4D;
  --warn:         #B26A00;
  --err:          #B3261E;

  /* ---------- Layers (semantic aliases) ---------- */
  --bg:           var(--paper);
  --bg-elev:      var(--bone);
  --bg-mute:      var(--fog);
  --fg:           var(--ink);
  --fg-mute:      var(--graphite-60);
  --fg-faint:     var(--graphite-30);
  --rule:         var(--fog);
  --rule-strong:  var(--stone);
  --focus:        var(--signal);

  /* ---------- Type families ---------- */
  --font-sans: "Poppins", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --font-display: var(--font-sans); /* same family — display weight does the work */

  /* ---------- Type scale ----------
     Restrained scale; ratios pulled toward editorial.
     Use rem so users can override; html { font-size: 16px } baseline. */
  --t-display-xl: 4.5rem;   /* 72 — hero, single word        */
  --t-display:    3.25rem;  /* 52 — section opener           */
  --t-h1:         2.25rem;  /* 36 — page title               */
  --t-h2:         1.5rem;   /* 24 — section heading          */
  --t-h3:         1.125rem; /* 18 — sub heading              */
  --t-body:       1rem;     /* 16 — paragraph                */
  --t-small:      0.875rem; /* 14 — meta, captions           */
  --t-micro:      0.75rem;  /* 12 — labels, indices          */

  /* ---------- Type weight ---------- */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;

  /* ---------- Type rhythm ---------- */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.75;
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;   /* mono labels, kbd, indices */
  --tracking-extra:   0.18em;   /* eyebrow labels in caps    */

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 144px;

  /* ---------- Layout ---------- */
  --gutter:        var(--space-7);   /* page side padding */
  --gutter-tight:  var(--space-5);
  --max-content:   1440px;
  --max-prose:     65ch;

  /* ---------- Borders & radii (sharp; gallery hairlines) ---------- */
  --rule-w:    1px;
  --rule-w-2:  2px;
  --radius-0:  0;        /* default — hard corners */
  --radius-1:  2px;      /* kbd, inputs */
  --radius-2:  4px;      /* badges */
  --radius-pill: 999px;  /* chips, kbd capsules */

  /* ---------- Elevation ----------
     There is essentially no shadow language in the gallery aesthetic.
     We rely on hairlines and bone fills instead. Use sparingly. */
  --elev-0: none;
  --elev-1: 0 1px 0 0 var(--rule);                /* a single inset bottom-rule */
  --elev-2: 0 8px 24px -12px rgb(10 10 10 / 0.18); /* lightbox / overlay only */

  /* ---------- Motion ----------
     No bounces. No spring. Linear or cubic-out only. Short. */
  --t-fast:   120ms;
  --t-base:   180ms;
  --t-slow:   320ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ============================================================
   Base element styles (semantic mappings)
   ============================================================ */
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: var(--w-regular); line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--t-h2); font-weight: var(--w-medium);  line-height: var(--lh-snug);  letter-spacing: -0.005em; }
h3 { font-size: var(--t-h3); font-weight: var(--w-medium);  line-height: var(--lh-snug); }

p  { margin: 0; max-width: var(--max-prose); text-wrap: pretty; }
p + p { margin-top: var(--space-4); }

small { font-size: var(--t-small); color: var(--fg-mute); }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--t-fast) var(--ease);
}
a:hover { opacity: 0.55; }

hr { border: 0; border-top: var(--rule-w) solid var(--rule); margin: var(--space-6) 0; }

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

/* ============================================================
   Utility classes (used by preview cards and ui kits)
   ============================================================ */

/* Eyebrow label — small, mono, caps, wide tracking. The voice of the system. */
.eyebrow,
.u-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-extra);
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Numeric index (01, 02, …). Used to give every list item a keyboard target. */
.u-index {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  color: var(--fg-faint);
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
}

/* Keyboard cap — used everywhere; this brand is keyboard-first. */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-1);
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kbd--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Hairline divider */
.u-rule { border-top: 1px solid var(--rule); }

/* Mono caption */
.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-wide); }