/* ==========================================================================
   SONDER DIGITAL — Design Tokens  (brand/tokens.css)
   The single source of truth for the Sonder house identity. Shared across the
   marketing site and any product surface that wants the parent-brand skin.

   Sibling of Grain (grainios.com) by DISCIPLINE, distinct by REGISTER:
     Grain  = warm linen · sage · SF Rounded · product, soft.
     Sonder = ivory paper · navy · Fraunces serif · house, editorial, matte.
   Same structural bones (radii 8/12/16/20/28, spacing 4/8/16/24/32/48,
   hairline + soft shadow, capsules, one primary + one warm accent).
   ========================================================================== */

:root {
  /* ---- Surfaces — warm-neutral ivory, premium editorial ---- */
  --bg:        #F5F4F0;   /* ivory paper — never pure white sections */
  --surface:   #FFFFFF;   /* cards / sheets */
  --elevated:  #EEEBE3;   /* alt sections / pressed */
  --border:    #E4E0D7;   /* 1px hairline */
  --border-2:  #D8D3C8;   /* stronger rule */

  /* ---- Navy — the brand ink & primary action color ---- */
  --navy:        #16233A;  /* brand ink · primary buttons · headings */
  --navy-press:  #0F1A2E;  /* pressed / hover on navy */
  --navy-deep:   #0F1A2E;  /* dark bands, footer, CTA */
  --navy-tint:   #ECEEF2;  /* pale navy wash */

  /* ---- Text (all AA on --bg) ---- */
  --text:            #16233A;  /* navy ink  ~13:1 */
  --text-secondary:  #4A5262;  /* slate     ~7:1  */
  --text-muted:      #6B7079;  /* muted     ~4.6:1 (AA) */

  /* ---- Steel — the interactive blue accent (links, active) ---- */
  --steel:       #3E6699;  /* interactive blue */
  --steel-press: #315480;
  --steel-deep:  #2C4C74;  /* link/text on light — ~7:1 */
  --steel-tint:  #EAEFF6;  /* wash — chip / section fills */
  --steel-soft:  #CBD9EC;  /* tint border */

  /* ---- Champagne — the one warm counterpoint (decorative, never body text) ---- */
  --champagne:      #B99A66;  /* premium warm accent — rules, ticks, seal ring on dark */
  --champagne-deep: #8C7340;  /* text-safe champagne — small labels only */

  /* ---- Status (semantic — NEVER recolored to navy/steel) ---- */
  --ok:     #4F9E7A;
  --warn:   #D9A441;
  --danger: #C86B62;

  /* ---- Dark band (CTA + footer) ---- */
  --band-bg:        #0F1A2E;
  --band-surface:   #182842;
  --band-border:    #29384F;
  --band-text:      #EDEAE2;              /* ivory on navy */
  --band-dim:       rgba(237, 234, 226, 0.66);
  --band-mute:      rgba(237, 234, 226, 0.45);
  --band-steel:     #8FB0DA;              /* lifted steel for on-dark links */
  --band-champagne: #CBAE79;

  /* ---- Nav frosted blur ---- */
  --nav-bg: rgba(245, 244, 240, 0.82);

  /* ---- Type ---- */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;              /* editorial serif — headlines */
  --label:   'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* eyebrows, wordmark, buttons, meta */
  --sans:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;    /* body */
  --mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* ---- Type scale (echoes Grain) ---- */
  --fs-large: 34px;
  --fs-title: 28px;
  --fs-title3: 20px;
  --fs-headline: 17px;
  --fs-body: 16px;
  --fs-callout: 15px;
  --fs-subhead: 14px;
  --fs-footnote: 13px;
  --fs-caption: 12px;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-xxl: 28px;
  --r-full: 999px;

  /* ---- Spacing ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* ---- Shadows — soft, matte, navy-tinted (never a cold gray drop) ---- */
  --shadow-card:      0 2px 8px rgba(15, 22, 34, 0.05);
  --shadow-card-hero: 0 6px 20px rgba(22, 35, 58, 0.08);
  --shadow-float:     0 2px 8px rgba(15, 22, 34, 0.05), 0 18px 44px rgba(22, 35, 58, 0.12);
  --shadow-lift:      0 10px 30px -12px rgba(22, 35, 58, 0.22);
}