/* ==========================================================================
   Salt & Indigo — design tokens
   Implements brand.html exactly. Proportion target: ~60% salt, 30% indigo,
   8% ink, 2% brass. Brass never becomes a large fill; the moment it does it
   reads as gold, which is a different and cheaper brand.
   ========================================================================== */

:root {
  /* Core palette */
  --indigo:       #17293F;
  --indigo-deep:  #0D1929;
  --indigo-mid:   #24405E;
  --brass:        #A87C41;
  --brass-light:  #C9A46A;
  --salt:         #EDEAE3;
  --salt-paper:   #F7F5F0;
  --sage:         #6C7A63;
  --ink:          #1B2430;
  --ink-muted:    #5A6672;
  --line:         #D6D1C6;
  --line-dark:    #2C4560;

  /* Text on indigo. Plain brass is 2.6:1 on indigo and fails; brass-light is 5.8:1. */
  --on-indigo:        var(--salt);
  --on-indigo-muted:  #A9BACB;
  --on-indigo-accent: var(--brass-light);

  /* Type */
  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-serif:   "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-sans:    "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Scale — clamped for mobile-first. Display never falls below 19px, where
     Caslon's thin strokes start to break up. */
  --t-display-1: clamp(34px, 7vw, 64px);
  --t-display-2: clamp(25px, 4.4vw, 32px);
  --t-lede:      clamp(17px, 2.2vw, 19px);
  --t-price:     clamp(26px, 4vw, 30px);
  --t-body:      15px;
  --t-small:     13px;
  --t-label:     11px;

  --lh-display: 1.08;
  --lh-body:    1.62;

  /* Uppercase labels: Karla's caps are too tight without this. */
  --ls-label:   0.18em;
  --ls-button:  0.11em;
  --ls-display: -0.01em;

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --measure-sans:  65ch;
  --measure-serif: 60ch;

  --wrap: 1080px;
  --gutter: clamp(20px, 5vw, 40px);

  /* Apple HIG minimum. Every interactive element meets this. */
  --tap-min: 44px;

  /* There is no --radius token. Square corners are structural to this system,
     not a default to be overridden. The single exception is the driver avatar,
     which is defined at its own component. */
}

/* Safe-area insets for notched devices, used by any fixed element. */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

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