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

/* ================================================================
   BLACKTHORN UNIVERSITY — GLOBAL DESIGN TOKENS & BASE RESETS
   ================================================================ */

:root {
  /* ── Colour Palette ── */
  --color-bg:            #0f0f14;
  --color-bg-surface:    #17171f;
  --color-bg-elevated:   #1e1e2a;
  --color-border:        #2a2a38;
  --color-border-gold:   #b8922a;

  --color-gold:          #c9a84c;
  --color-gold-light:    #e8c97a;
  --color-gold-dim:      #7a6030;

  --color-text-primary:  #e8e0d0;
  --color-text-muted:    #8a8070;
  --color-text-heading:  #f0e6c8;
  --color-text-code:     #d4c5a0;

  --color-success:       #4a9463;
  --color-success-bg:    #1a2e22;
  --color-success-border:#2a5038;

  --color-progress-bg:   #2a2a38;
  --color-link:          #c9a84c;
  --color-link-hover:    #e8c97a;

  --color-callout-tip-bg:    #1a1e2e;
  --color-callout-tip-border:#2a3a5a;
  --color-callout-tip-label: #6a9fd8;

  --color-callout-warn-bg:    #201a10;
  --color-callout-warn-border:#4a3a18;
  --color-callout-warn-label: #c9a84c;

  /* ── Crest-derived extensions (Veritas Ex Tenebris) ── */
  --color-silver:        #cfd2da;   /* mantling highlight */
  --color-silver-mid:    #9a9ea8;   /* mantling mid */
  --color-silver-dim:    #6b6e78;   /* mantling shadow */
  --color-parchment:     #e9dcc2;   /* banner / scroll */
  --color-parchment-dim: #cbb98f;   /* banner edge */
  --color-leaf:          #4e6b3a;   /* blackthorn leaves */
  --color-blossom:       #f4f2ea;   /* blackthorn blossom white */
  --color-motto-bg:      #14130f;   /* dark heraldic banner */

  /* ── Typography ── */
  --font-serif: 'Crimson Pro', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-sans:  'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* ── Type Scale ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;
  --text-3xl:  48px;

  /* ── Spacing ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── Radii ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ── Shadows ── */
  --shadow-card:  0 2px 12px rgba(0,0,0,0.5), 0 0 0 1px var(--color-border);
  --shadow-gold:  0 0 20px rgba(201,168,76,0.12);
  --shadow-btn:   0 2px 8px rgba(0,0,0,0.4);

  /* ── Transitions ── */
  --ease-reveal:   opacity 0.38s ease, transform 0.38s ease;
  --ease-btn:      background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* ── Base Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--color-link-hover); text-decoration: underline; }

/* ── Typography helpers ── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-text-heading);
  font-weight: 700;
  line-height: 1.25;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
}

/* ── Inline code ── */
.inline-code {
  background: var(--color-bg-elevated);
  color: var(--color-gold-light);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.87em;
  border: 1px solid var(--color-border);
}

/* ── Shared: breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-gold); text-decoration: none; }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-current { color: var(--color-text-primary); }

/* ── Scrollbar styling ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold-dim); }

/* ── Selection ── */
::selection { background: var(--color-gold-dim); color: var(--color-text-heading); }