/* ============================================================================
   0BVIOUSLY.LOVE — base.css
   Design tokens, reset, base typography, fluid type, utilities.
   Aesthetic: "lantern-light" — warm amber light carved from cold deep-indigo.
   Zero external dependencies. System fonts only.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* --- Color: dark grounds --- */
  --c-night:        #0E1622;   /* near-black deep indigo (page base)        */
  --c-deep:         #16242E;   /* deep teal-indigo (raised surfaces)        */
  --c-sea:          #1C3540;   /* cold teal sea                             */
  --c-surface:      #1A2A36;   /* card / panel surface                      */
  --c-surface-2:    #213744;   /* hover / elevated surface                  */

  /* --- Color: warm light --- */
  --c-amber:        #E8A33D;   /* primary warm accent (lantern)             */
  --c-amber-bright: #F4BC5E;   /* hover / glow highlight                    */
  --c-fire:         #D6772F;   /* firelight (secondary warm)                */
  --c-fire-deep:    #B85C22;   /* pressed firelight                         */

  /* --- Color: text on dark (bone / driftwood) --- */
  --c-bone:         #E7E3D6;   /* primary text                             */
  --c-driftwood:    #C9C0AE;   /* secondary text                           */
  --c-muted:        #8A8676;   /* tertiary / captions                       */

  /* --- Color: UI lines (slate) --- */
  --c-slate:        #5A6066;   /* borders, dividers, UI lines               */
  --c-slate-soft:   rgba(90, 96, 102, 0.32); /* hairlines                  */

  /* --- Semantic --- */
  --c-bg:           var(--c-night);
  --c-fg:           var(--c-bone);
  --c-accent:       var(--c-amber);
  --c-accent-2:     var(--c-fire);
  --c-link:         var(--c-amber-bright);

  /* --- Glows / bloom (soft warm light) --- */
  --glow-amber:     0 0 24px rgba(232, 163, 61, 0.45);
  --glow-amber-lg:  0 0 64px rgba(232, 163, 61, 0.30);
  --glow-fire:      0 0 32px rgba(214, 119, 47, 0.40);

  /* --- Shadows (cold cast into dark) --- */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:      0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg:      0 24px 64px rgba(0, 0, 0, 0.55);

  /* --- Type scale (fluid, clamped) --- */
  --fs-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.84rem);
  --fs-sm:    clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --fs-base:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg:    clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-xl:    clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --fs-2xl:   clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --fs-3xl:   clamp(2.6rem, 1.9rem + 3.4vw, 5rem);     /* hero headline     */
  --fs-hero:  clamp(2.8rem, 2rem + 4.2vw, 6rem);       /* largest cinematic */

  /* --- Type families (system stacks; no external CDN) --- */
  /* Serif pairing for cinematic headings (painterly, literary feel) */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Palatino",
                  "Book Antiqua", Georgia, "Times New Roman", serif;
  /* Humanist sans for body / UI */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* --- Line heights / tracking --- */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.65;
  --tracking-wide: 0.08em;
  --tracking-xwide: 0.22em;

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

  /* --- Layout --- */
  --maxw:        1180px;
  --maxw-narrow: 760px;
  --gutter:      clamp(1.25rem, 4vw, 3rem);

  /* --- Radii --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* --- Motion (slow, gentle) --- */
  --dur-fast:  180ms;
  --dur-base:  340ms;
  --dur-slow:  600ms;
  --dur-xslow: 1100ms;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);   /* gentle ease-out     */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z layers --- */
  --z-hero-bg: 0;
  --z-base:    1;
  --z-nav:     100;
  --z-overlay: 200;
}

/* ----------------------------------------------------------------------------
   RESET / NORMALIZE (modern, minimal)
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-fg);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* digits with slashed zero everywhere by default */
  font-feature-settings: "zero" 1;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

a { color: var(--c-link); text-decoration: none; }
a:hover { color: var(--c-amber-bright); }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

p, li { max-width: 68ch; }

/* Honor reduced motion globally as a hard guard */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ----------------------------------------------------------------------------
   BASE TYPOGRAPHY
   ---------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--c-bone);
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--c-amber);
  font-weight: 600;
}

.lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--c-driftwood);
  max-width: 56ch;
}

small, .text-sm { font-size: var(--fs-sm); }
.text-muted { color: var(--c-muted); }
.text-drift { color: var(--c-driftwood); }

/* ----------------------------------------------------------------------------
   WORDMARK — slashed-zero brand treatment for "0BVIOUSLY"
   Enables the OpenType `zero` feature so the leading 0 is slashed.
   ---------------------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-feature-settings: "zero" 1;   /* slashed zero */
  color: var(--c-bone);
}
.wordmark__love { color: var(--c-amber); }
/* Any standalone digits inherit the slashed zero from body, reinforced here. */
.tnum { font-variant-numeric: tabular-nums slashed-zero; }

/* ----------------------------------------------------------------------------
   LAYOUT UTILITIES
   ---------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section {
  padding-block: clamp(var(--sp-8), 10vw, var(--sp-10));
}
.section--tight { padding-block: clamp(var(--sp-7), 7vw, var(--sp-9)); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.flow > * + * { margin-top: 1em; }

/* ----------------------------------------------------------------------------
   UTILITY CLASSES
   ---------------------------------------------------------------------------- */
.center      { text-align: center; }
.mx-auto     { margin-inline: auto; }
.hidden      { display: none !important; }
.full-bleed  { width: 100%; }

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -3rem;
  z-index: var(--z-overlay);
  background: var(--c-amber);
  color: var(--c-night);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ----------------------------------------------------------------------------
   FOCUS STYLES (accessible, warm)
   ---------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--c-amber-bright);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: rgba(232, 163, 61, 0.30);
  color: var(--c-bone);
}