/* ============================================================
   Dara Oladapo Design System — Foundations
   Dark, minimalist, cinematic. DevOps · Dashboards · Course materials.
   ============================================================ */

@font-face {
  font-family: "League Spartan";
  src: url("fonts/LeagueSpartan-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Glacial Indifference";
  src: url("fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Glacial Indifference";
  src: url("fonts/GlacialIndifference-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono via Google Fonts (system fallback if blocked) */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Color · Surfaces (the cinematic stack) ---------- */
  --bg-0:        #0A0A0B;   /* deepest — page void */
  --bg-1:        #111114;   /* canvas */
  --bg-2:        #17171B;   /* card */
  --bg-3:        #1F1F24;   /* raised / hovered card */
  --bg-4:        #2A2A30;   /* input, popover */
  --bg-inverse:  #F5F5F2;   /* light surfaces (rare, for inversions) */

  /* ---------- Color · Foreground ---------- */
  --fg-1:        #F5F5F2;   /* primary text — warm off-white */
  --fg-2:        #B8B8B3;   /* secondary text */
  --fg-3:        #7A7A75;   /* tertiary / metadata */
  --fg-4:        #4A4A48;   /* disabled / ghost */
  --fg-on-accent:#0A0A0B;   /* text sitting on accent fill */

  /* ---------- Color · Accent (signature amber/ember) ---------- */
  --accent:        #E8B547;   /* warm amber — the one bold beat */
  --accent-hover:  #F2C45E;
  --accent-press:  #C99A35;
  --accent-soft:   rgba(232, 181, 71, 0.12);
  --accent-line:   rgba(232, 181, 71, 0.32);

  /* ---------- Color · Semantic ---------- */
  --success:      #58C28A;
  --success-soft: rgba(88, 194, 138, 0.12);
  --warning:      #E8B547;
  --warning-soft: rgba(232, 181, 71, 0.12);
  --danger:       #E5604D;
  --danger-soft:  rgba(229, 96, 77, 0.12);
  --info:         #7AA7E8;
  --info-soft:    rgba(122, 167, 232, 0.12);

  /* ---------- Color · DevOps status (dashboards) ---------- */
  --status-running:  #58C28A;
  --status-pending:  #E8B547;
  --status-failed:   #E5604D;
  --status-idle:     #7A7A75;
  --status-queued:   #7AA7E8;

  /* ---------- Color · Chart palette (data-viz only) ----------
     Restrained, dark-mode-tuned. Never used in chrome. Order is intentional. */
  --chart-1: #E8B547;   /* amber (brand) */
  --chart-2: #7AA7E8;   /* dusk blue */
  --chart-3: #58C28A;   /* mint */
  --chart-4: #C58CE5;   /* mauve */
  --chart-5: #E5604D;   /* ember */

  /* ---------- Borders & Dividers ---------- */
  --border-1: rgba(255, 255, 255, 0.06);  /* hairline */
  --border-2: rgba(255, 255, 255, 0.10);  /* default */
  --border-3: rgba(255, 255, 255, 0.16);  /* emphasized */
  --border-focus: var(--accent);

  /* ---------- Type · Families ---------- */
  --font-display: "League Spartan", "Inter", system-ui, sans-serif;
  --font-body:    "Glacial Indifference", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type · Scale (modular, 1.25) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* Cinematic display sizes (decks, hero treatments) */
  --fs-display-1: 8.25rem;   /* 132px */
  --fs-display-2: 10.5rem;   /* 168px */
  --fs-display-3: 17.5rem;   /* 280px decorative glyph */

  /* ---------- Spacing · 4-px base ---------- */
  --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: 128px;

  /* ---------- Radii · soft but never bubble ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows · subtle, cinematic ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.48);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 64px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 1px var(--accent-line), 0 0 32px rgba(232, 181, 71, 0.18);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     400ms;
  --dur-cinema:   720ms;

  /* ---------- Layout ---------- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.display-xl { font-size: clamp(3.5rem, 8vw, 6rem); letter-spacing: -0.035em; line-height: 0.94; }
h1, .h1     { font-size: clamp(2.5rem, 5.5vw, 4.5rem); letter-spacing: -0.03em; line-height: 0.98; }
h2, .h2     { font-size: var(--fs-40); letter-spacing: -0.025em; }
h3, .h3     { font-size: var(--fs-32); letter-spacing: -0.02em; }
h4, .h4     { font-size: var(--fs-24); letter-spacing: -0.01em; }
h5, .h5     { font-size: var(--fs-20); letter-spacing: 0; }
h6, .h6     { font-size: var(--fs-16); letter-spacing: 0.04em; }

p, .body { font-family: var(--font-body); font-size: var(--fs-16); line-height: 1.6; color: var(--fg-2); margin: 0; text-wrap: pretty; }
.lead    { font-size: var(--fs-20); line-height: 1.5; color: var(--fg-2); }
.small   { font-size: var(--fs-14); color: var(--fg-3); }
.caption { font-size: var(--fs-12); color: var(--fg-3); letter-spacing: 0.04em; text-transform: uppercase; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

a { color: var(--fg-1); text-decoration: none; border-bottom: 1px solid var(--border-3); transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

code, kbd, pre, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
}
code { background: var(--bg-3); padding: 2px 6px; border-radius: var(--radius-xs); border: 1px solid var(--border-1); }
pre  { background: var(--bg-2); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-1); overflow: auto; }

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

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

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}