/* ============================================================
   Veblenic Design System — Foundations
   Paper by day. Night by ceremony. Navy by shadow.
   Steel by structure. Brass by seal. Oxblood only by consequence.
   ============================================================ */

/* ----------  Webfonts (Google Fonts substitutions)  ----------
   Display:  Cormorant Garamond  (canonical: Cormorant Garamond / Canela / Noe)
   Body:     Inter               (canonical: Inter / Neue Haas Grotesk)
   Mono:     IBM Plex Mono       (canonical: IBM Plex Mono)
------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Foundation: Night / Ink ---------- */
  --vbln-ink-950:      #070A0F;
  --vbln-night-900:    #0C1017;
  --vbln-night-850:    #11161F;
  --vbln-night-800:    #161B22;

  /* ---------- Paper: Doctrine / Reading / Hospitality ---------- */
  --vbln-paper-100:    #ECE7DE;
  --vbln-paper-150:    #E7E0D5;
  --vbln-paper-200:    #D8D1C7;
  --vbln-paper-300:    #C9C2B8;

  /* ---------- Atmospheric Navy ---------- */
  --vbln-navy-850:     #121C2B;
  --vbln-navy-800:     #1A2636;
  --vbln-navy-700:     #223248;
  --vbln-shadow-line:  #2A313B;
  --vbln-shadow-rule:  #394250;

  /* ---------- Steel / Gunmetal ---------- */
  --vbln-steel-500:    #8E98A6;
  --vbln-steel-600:    #6F7B89;
  --vbln-steel-700:    #55616D;

  /* ---------- Brass: ceremonial, never loud ---------- */
  --vbln-brass-500:    #8A7356;
  --vbln-brass-lit:    #B8A089;
  --vbln-brass-deep:   #6F5A42;

  /* ---------- Oxblood reserve ---------- */
  --vbln-oxblood-700:  #4A2027;
  --vbln-oxblood-600:  #62303A;

  /* ---------- Light-mode ink ---------- */
  --vbln-ink-light:    #171A1F;
  --vbln-ink-soft:     #4E5661;

  /* ---------- Type stacks ---------- */
  --font-display: "Cormorant Garamond", "Canela", "Noe Display", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* ---------- Type scale ---------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  clamp(3.25rem, 8vw, 6.5rem);

  /* ---------- Tracking ---------- */
  --tracking-tight:    -0.015em;
  --tracking-normal:    0em;
  --tracking-wide:      0.02em;
  --tracking-eyebrow:   0.18em;   /* small-caps labels, eyebrows */

  /* ---------- Leading ---------- */
  --leading-tight:  1.08;
  --leading-snug:   1.22;
  --leading-body:   1.55;
  --leading-reader: 1.7;

  /* ---------- Grid + spacing ---------- */
  --grid-max:       1200px;
  --grid-readable:  720px;
  --grid-narrow:    560px;

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ---------- Radii: institutional, restrained ---------- */
  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  18px;     /* cards */
  --radius-pill: 999px;   /* buttons, chips */

  /* ---------- Borders (hairlines, architecture) ---------- */
  --hairline:     1px;
  --rule-strong:  1px;

  /* ---------- Elevation: paper shadows (long, low, warm) ---------- */
  --shadow-paper-sm: 0 2px 8px rgba(12, 16, 23, 0.06);
  --shadow-paper-md: 0 8px 28px rgba(12, 16, 23, 0.07);
  --shadow-paper-lg: 0 18px 60px rgba(12, 16, 23, 0.08);

  /* ---------- Elevation: night shadows ---------- */
  --shadow-night-sm: 0 4px 14px rgba(0, 0, 0, 0.18);
  --shadow-night-md: 0 10px 36px rgba(0, 0, 0, 0.28);
  --shadow-night-lg: 0 24px 80px rgba(0, 0, 0, 0.34);

  /* ---------- Motion: drift, never scramble ---------- */
  --ease-drift: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-door:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   160ms;
  --dur-base:   280ms;
  --dur-slow:   520ms;
}

/* ============================================================
   Theme tokens
   ============================================================ */

[data-theme="light"],
:root {
  --bg:             var(--vbln-paper-100);
  --bg-soft:        var(--vbln-paper-150);
  --surface:        #F4F0E8;
  --surface-raised: var(--vbln-paper-200);

  --text:           var(--vbln-ink-light);
  --text-soft:      var(--vbln-ink-soft);
  --text-muted:     var(--vbln-steel-700);

  --border:         #CFC6BA;
  --border-strong:  #BDB4A8;

  --accent:         var(--vbln-brass-deep);
  --accent-soft:    var(--vbln-brass-500);
  --link:           #1E2B3F;

  --danger:         var(--vbln-oxblood-700);

  --shadow-sm:      var(--shadow-paper-sm);
  --shadow-md:      var(--shadow-paper-md);
  --shadow-lg:      var(--shadow-paper-lg);

  --bg-gradient:
    linear-gradient(180deg, #F4F0E8 0%, #ECE7DE 48%, #E2DBD0 100%);
}

[data-theme="dark"] {
  --bg:             var(--vbln-night-900);
  --bg-deep:        var(--vbln-ink-950);
  --surface:        var(--vbln-night-850);
  --surface-raised: var(--vbln-night-800);

  --text:           var(--vbln-paper-150);
  --text-soft:      var(--vbln-paper-300);
  --text-muted:     var(--vbln-steel-500);

  --border:         var(--vbln-shadow-line);
  --border-strong:  var(--vbln-shadow-rule);

  --accent:         var(--vbln-brass-500);
  --accent-text:    var(--vbln-brass-lit);
  --accent-hover:   var(--vbln-navy-700);
  --link:           var(--vbln-paper-150);

  --danger:         var(--vbln-oxblood-600);

  --shadow-sm:      var(--shadow-night-sm);
  --shadow-md:      var(--shadow-night-md);
  --shadow-lg:      var(--shadow-night-lg);

  --bg-gradient:
    radial-gradient(circle at 72% 12%, rgba(34, 50, 72, 0.34), transparent 38%),
    radial-gradient(circle at 18% 82%, rgba(138, 115, 86, 0.10), transparent 34%),
    linear-gradient(180deg, #0C1017 0%, #070A0F 100%);
}

/* ============================================================
   Base — only when this file is loaded as the root reset
   ============================================================ */

html, body {
  background: var(--bg-gradient, var(--bg));
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic typography ---------- */

.vbln-eyebrow,
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.vbln-display,
h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--text);
}

h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--text);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
}

.reader {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-reader);
  max-width: var(--grid-readable);
  color: var(--text);
}

.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.35;
  color: var(--text-soft);
}

.caption,
.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ---------- Links ---------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(138, 115, 86, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--dur-fast) var(--ease-drift);
}
a:hover { color: var(--vbln-brass-deep); }
[data-theme="dark"] a { color: var(--vbln-paper-150); text-decoration-color: var(--vbln-brass-500); }
[data-theme="dark"] a:hover { color: var(--vbln-brass-lit); }

/* ---------- Selection ---------- */
::selection {
  background: rgba(138, 115, 86, 0.35);
  color: var(--text);
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--vbln-brass-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}