/* ============================================================
   frame.w0rk — Design Token System
   Portable design-system stylesheet (source of truth)
   skele.t0l · festina lente
   ============================================================ */

/* ---- Fonts (Google Fonts) -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500&display=swap');

/* ============================================================
   1. LOCKED TOKENS
   ============================================================ */
:root {
  /* Container */
  --void:        #1A1525;   /* plum-charcoal container          */

  /* Quadruplicity — elemental pastels (constant across modes)  */
  --air:         #B894D9;   /* Orchid     · Reading             */
  --fire:        #E663A0;   /* Fuchsia    · Speaking            */
  --water:       #7A8FE0;   /* Cornflower · Listening           */
  --earth:       #C5D86E;   /* Chartreuse · Writing             */

  /* Convergence — the fifth element                            */
  --wisteria:    #CC99CC;   /* Spirit · convergence · threshold */

  /* Magnum Opus — alchemical framing layer                     */
  --nigredo:     #050208;   /* blackening                       */
  --albedo:      #F5F5F0;   /* whitening                        */
  --rubedo:      #C5994D;   /* sepia-gold reddening             */
  --pearl:       #DDC9A5;   /* champagne · threshold / 0.5      */

  /* Semantic accents (page-level)                              */
  --gold:        #E5BC5C;   /* Primary accent · CTA             */
  --rose:        #9B6B7E;   /* Secondary warmth                 */
  --sage:        #5E8A72;   /* Tertiary · grounding             */

  /* Surfaces                                                   */
  --ink:         #050208;   /* True background                  */
  --ink-2:       #15101F;   /* Elevated surface                 */
  --surface-1:   #0E0A16;   /* Card background                  */
  --surface-2:   #15101F;   /* Raised card                      */
  --surface-3:   #1A1525;   /* Highest elevation                */
  --plum:        #241B33;   /* Titlebar / deep accent surface   */

  /* Text                                                       */
  --cream:       #F5F5F0;   /* Primary text                     */
  --warm:        #E8DFD5;   /* Secondary text                   */
  --muted:       #B8AEBC;   /* Subdued / metadata               */

  /* Borders                                                    */
  --border:      rgba(90,74,106,.35);
  --border-strong: rgba(229,188,92,.4);

  /* Type stack                                                 */
  --display: 'Cormorant', Georgia, serif;          /* headings  */
  --sans:    'IBM Plex Sans', system-ui, sans-serif;/* body      */
  --mono:    'IBM Plex Mono', ui-monospace, monospace;/* labels  */

  /* Scale */
  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   2. THEME MODES — semantic overrides
   ============================================================ */

/* Dark — the void with gold accent (default) */
:root,
[data-theme="dark"] {
  --bg:        #050208;
  --surface:   #15101F;
  --text:      #F5F5F0;
  --text-muted:#A9A2B8;
  --head:      #F5F5F0;
  --accent:    #E5BC5C;
  --rule:      #2B2436;
}

/* Void — deeper than dark, purple atmosphere */
[data-theme="void"] {
  --bg:        #050208;
  --surface:   #0E0A16;
  --text:      #F5F5F0;
  --text-muted:#9A86C0;
  --head:      #F0E7FA;
  --accent:    #B894D9;
  --rule:      #3A3350;
}

/* Light — grey morning workspace */
[data-theme="light"] {
  --bg:        #E8E5E0;
  --surface:   #F3F1ED;
  --text:      #2A2A30;
  --text-muted:#5C5A63;
  --head:      #1E1B26;
  --accent:    #8B6F3D;
  --rule:      #CFCAC2;
}

/* Monochrome — the engraving render */
[data-theme="monochrome"] {
  --bg:        #1F1F22;
  --surface:   #2A2A2E;
  --text:      #E5E5E5;
  --text-muted:#9A9A9A;
  --head:      #FFFFFF;
  --accent:    #BCBCBC;
  --rule:      #3A3A3E;
}

/* Sepia — aged manuscript */
[data-theme="sepia"] {
  --bg:        #E8DCC4;
  --surface:   #F0E7D4;
  --text:      #3E2D1A;
  --text-muted:#6B5638;
  --head:      #2C1E0E;
  --accent:    #8B6F3D;
  --rule:      #CDBE9C;
}

/* Windows 98 — cosmic desktop */
[data-theme="win98"] {
  --bg:        #1A1525;
  --surface:   #C0C0C0;
  --text:      #F5F5F0;
  --text-muted:#B5AEC2;
  --head:      #F5F5F0;
  --accent:    #E663A0;
  --rule:      #2B2436;
  --bevel-light: #FFFFFF;
  --bevel-dark:  #808080;
  --bevel-deep:  #404040;
}

/* ============================================================
   3. BASE
   ============================================================ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: 1.6;
  letter-spacing: 0.01em;
  transition: background .4s var(--ease), color .4s var(--ease);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  color: var(--head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 400; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Utility classes */
.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.02em; }
.caps { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

/* ============================================================
   4. COMPONENTS
   ============================================================ */

/* W98 Card — the chrome surface */
.fw-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.fw-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* W98 Titlebar */
.fw-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(90deg, var(--plum), var(--ink-2));
  border-bottom: 1px solid var(--border);
}
.fw-titlebar .dots {
  display: flex;
  gap: 5px;
}
.fw-titlebar .dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(184,174,188,.4);
}
.fw-titlebar .dots span:last-child {
  background: rgba(229,188,92,.35);
}
.fw-titlebar .title {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm);
  margin-left: 0.25rem;
}

/* Card link */
.fw-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.2s;
}
.fw-card-link:hover { opacity: 0.7; }
.fw-card-link::after { content: ' \2192'; }

/* CTA Button */
.fw-cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 1rem 2.5rem;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background 0.2s var(--ease-out-expo), transform 0.15s var(--ease-out-expo);
}
.fw-cta:hover { background: #f0cc6e; transform: translateY(-1px); }

/* ---- Starfield ------------------------------------------- */
.fw-stars {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  opacity: 0.9;
}
.fw-stars span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--pearl);
  animation: fw-twinkle 4s var(--ease) infinite;
}
@keyframes fw-twinkle { 0%,100%{opacity:.25} 50%{opacity:1} }

/* ============================================================
   5. WIN98 GLOBAL SKIN
   ============================================================ */
[data-theme="win98"] body { background: var(--void); }
[data-theme="win98"] .fw-card {
  background: #C0C0C0;
  color: #1a1a1a;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  border-radius: 0;
}
[data-theme="win98"] .fw-card:hover { transform: none; }
[data-theme="win98"] h1,
[data-theme="win98"] h2,
[data-theme="win98"] h3 { color: #1a1a1a; }

/* ============================================================
   6. RESPONSIVE & A11Y
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 768px) {
  :root { --gutter: 1.5rem; }
}