/* ============================================================
   Codeacula Design System — Colors & Type
   "The greatest orbs to ponder are the stars above."
   ============================================================ */

@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/Cinzel-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono NF';
  src: url('/fonts/JetBrainsMonoNerdFont-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* ---------- Core brand palette ---------- */
  --navy-blue: #1c273e; /* primary — deep space */
  --ivory-white: #fdfcf0; /* primary — parchment / starlight */
  --starry-silver: #a2aabc; /* accent — distant stars */
  --sunset-gold: #ffb86c; /* accent — orb glow / warm highlight */
  --arcane-dust: #3d2b6b; /* secondary — arcane / violet nebula */

  /* ---------- Extended navy scale (derived from #1c273e) ---------- */
  --navy-950: #0c1220; /* deepest — void */
  --navy-900: #131b2d;
  --navy-800: #1c273e; /* base navy */
  --navy-700: #2a3654;
  --navy-600: #3a476a;
  --navy-500: #4c5a80;

  /* ---------- Extended ivory / neutral scale ---------- */
  --ivory-50: #fdfcf0; /* base ivory */
  --ivory-100: #f5f2e0;
  --ivory-200: #e8e4cf;
  --ivory-300: #c9c8b8;

  /* ---------- Silver scale ---------- */
  --silver-300: #d7dce2;
  --silver-400: #a2aabc; /* base silver */
  --silver-500: #7b85a0;
  --silver-600: #5c6684;

  /* ---------- Gold scale ---------- */
  --gold-300: #ffd6a0;
  --gold-400: #ffc488;
  --gold-500: #ffb86c; /* base gold */
  --gold-600: #e89a4a;
  --gold-700: #b8782e;

  /* ---------- Arcane scale ---------- */
  --arcane-400: #6b4fb8;
  --arcane-500: #503890;
  --arcane-600: #3d2b6b; /* base arcane */
  --arcane-700: #2d1f50;

  /* ---------- Semantic — Foreground ---------- */
  --fg-1: var(--ivory-50); /* primary text on dark */
  --fg-2: var(--silver-400); /* secondary text / metadata */
  --fg-3: var(--silver-500); /* tertiary / muted */
  --fg-inverse: var(--navy-800); /* text on light bg */
  --fg-accent: var(--gold-500); /* highlight / link / gilded */
  --fg-arcane: #9e82e8; /* arcane accent text (lightened) */

  /* ---------- Semantic — Background ---------- */
  --bg-1: var(--navy-800); /* primary canvas */
  --bg-2: var(--navy-900); /* elevated-down (wells) */
  --bg-3: var(--navy-700); /* elevated-up (surfaces) */
  --bg-void: var(--navy-950); /* deepest — code blocks, modals */
  --bg-inverse: var(--ivory-50); /* paper / print surfaces */

  /* ---------- Semantic — Borders & rules ---------- */
  --border-1: rgba(162, 170, 188, 0.18); /* subtle — starry silver @ 18 */
  --border-2: rgba(162, 170, 188, 0.32); /* standard */
  --border-3: rgba(255, 184, 108, 0.45); /* gilded — for accents */

  /* ---------- Status / Alert colors (harmonized with palette) ----------
     Each alert has 4 roles, tuned for the dark navy canvas:
       base   — solid hue, for icons / accents / left-rules
       fg     — lightened, readable as text on dark surfaces
       bg     — deep tinted "glass" surface for filled alerts
       border — hairline tone for outlined alerts
  */

  /* Success — Aurora Sage */
  --success-base: #7fc8a3;
  --success-fg: #a8e0c4;
  --success-bg: #16302a;
  --success-border: rgba(127, 200, 163, 0.32);

  /* Warning — Sunset Gold (brand gold) */
  --warning-base: #ffb86c;
  --warning-fg: #ffd6a0;
  --warning-bg: #2f2516;
  --warning-border: rgba(255, 184, 108, 0.34);

  /* Error / Danger — Ember Coral (warm, not alarm-red) */
  --danger-base: #e07a6b;
  --danger-fg: #f0a99d;
  --danger-bg: #331d1b;
  --danger-border: rgba(224, 122, 107, 0.34);

  /* Info — Celestial Blue */
  --info-base: #6aa8d4;
  --info-fg: #9ccae8;
  --info-bg: #16273a;
  --info-border: rgba(106, 168, 212, 0.34);

  /* Note / Arcane — Violet Nebula (on-brand "tip / discovery") */
  --note-base: #9e82e8;
  --note-fg: #bca6f0;
  --note-bg: #211a39;
  --note-border: rgba(158, 130, 232, 0.34);

  /* Backwards-compatible aliases */
  --status-success: var(--success-base);
  --status-warning: var(--warning-base);
  --status-danger: var(--danger-base);
  --status-info: var(--info-base);

  /* ---------- Orb glow (for focus / halo effects) ---------- */
  --glow-gold: 0 0 24px rgba(255, 184, 108, 0.35);
  --glow-arcane: 0 0 24px rgba(107, 79, 184, 0.4);
  --glow-silver: 0 0 18px rgba(162, 170, 188, 0.25);

  /* ---------- Typography — families ---------- */
  --font-logo: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:
    'JetBrains Mono NF', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Typography — scale (modular, 1.25 on body / 1.333 on display) ---------- */
  --step--2: 0.75rem; /* 12 — micro / legal */
  --step--1: 0.875rem; /* 14 — meta */
  --step-0: 1rem; /* 16 — body base */
  --step-1: 1.125rem; /* 18 — body large */
  --step-2: 1.375rem; /* 22 — h5 */
  --step-3: 1.75rem; /* 28 — h4 */
  --step-4: 2.25rem; /* 36 — h3 */
  --step-5: 3rem; /* 48 — h2 */
  --step-6: 4rem; /* 64 — h1 */
  --step-7: 5.5rem; /* 88 — display */

  /* ---------- Line heights ---------- */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug: 1.2; /* @kind font */
  --lh-body: 1.55; /* @kind font */
  --lh-loose: 1.75; /* @kind font */

  /* ---------- Tracking ---------- */
  --track-tight: -0.02em;
  --track-normal: 0; /* @kind font */
  --track-wide: 0.04em;
  --track-caps: 0.12em; /* for small uppercase labels */

  /* ---------- Spacing (4px rhythm) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---------- Radii — restrained, mostly sharp ---------- */
  --radius-0: 0; /* sharp — primary */
  --radius-1: 2px; /* barely-there */
  --radius-2: 4px; /* inputs */
  --radius-3: 8px; /* buttons */
  --radius-pill: 999px; /* tags, capsules */

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border-1);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--border-1);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-2);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-stars: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */
  --dur-drift: 1200ms; /* @kind other */
}

/* ============================================================
   Semantic typography — ready-to-use classes & element defaults
   ============================================================ */

html,
body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-feature-settings: 'ss01', 'cv11';
}

.font-display {
  font-family: var(--font-display);
}
.font-body {
  font-family: var(--font-body);
}
.font-mono {
  font-family: var(--font-mono);
}

/* Display — Cormorant Garamond, the "pondering orbs" voice */
.display,
h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-7);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.display--italic {
  font-style: italic;
  font-weight: 400;
}

/* Heading scale */
h1,
.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-6);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}
h2,
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-5);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}
h3,
.h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-4);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}
h4,
.h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: var(--lh-snug);
}
h5,
.h5 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--lh-snug);
}

/* Body */
p,
.body {
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}
.body-lg {
  font-size: var(--step-1);
  line-height: var(--lh-body);
}
.body-sm {
  font-size: var(--step--1);
  line-height: var(--lh-body);
}

/* Eyebrow / kicker / small caps label — uppercase tracked */
.eyebrow,
.kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--fg-2);
}

/* Lede — paragraph intro, slightly larger */
.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--step-2);
  line-height: var(--lh-body);
  color: var(--ivory-200);
}

/* Pullquote — Diogenes-style sayings */
.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 2px solid var(--gold-500);
  padding-left: var(--space-5);
  max-width: 34ch;
}

/* Meta / metadata rows */
.meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-2);
  letter-spacing: var(--track-wide);
}

/* Code */
code,
.code-inline {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.12em 0.4em;
  background: var(--bg-void);
  border: 1px solid var(--border-1);
  color: var(--gold-400);
  border-radius: var(--radius-2);
}
pre.code-block {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: var(--lh-body);
  padding: var(--space-5);
  background: var(--bg-void);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-3);
  color: var(--ivory-100);
  overflow-x: auto;
}

/* Link */
a {
  color: var(--gold-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 184, 108, 0.35);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--gold-300);
  border-bottom-color: var(--gold-300);
}

/* Selection */
::selection {
  background: rgba(255, 184, 108, 0.3);
  color: var(--ivory-50);
}