/* ============================================================
   CIVIC GUIDE — Design Tokens
   Business Directory / Marketplace POC
   Aesthetic: printed city guide x transit wayfinding signage
   ============================================================ */

:root {
  /* ---- Type families -------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: "Archivo", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---- Type scale (fluid) --------------------------------- */
  --t-display: clamp(2.75rem, 1.55rem + 4.8vw, 5.25rem);
  --t-h1:      clamp(2rem, 1.35rem + 2.6vw, 3.375rem);
  --t-h2:      clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --t-h3:      clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
  --t-h4:      1.0625rem;
  --t-body:    1rem;
  --t-sm:      0.875rem;
  --t-xs:      0.78125rem;
  --t-2xs:     0.6875rem;

  --lh-tight:  1.06;
  --lh-snug:   1.25;
  --lh-body:   1.6;
  --lh-loose:  1.75;

  /* Wayfinding letterspacing — signage caps */
  --ls-caps:   0.14em;
  --ls-caps-sm:0.09em;
  --ls-tight:  -0.02em;
  --ls-display:-0.03em;

  /* ---- Spacing (8px base) --------------------------------- */
  --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 --------------------------------------------- */
  --wrap:       1280px;
  --wrap-wide:  1560px;
  --wrap-read:  68ch;
  --gutter:     clamp(1.125rem, 4vw, 3rem);
  --header-h:   64px;

  /* ---- Radii — signage is sharp, chips are pills ---------- */
  --r-xs: 2px;  --r-sm: 3px;  --r-md: 6px;  --r-lg: 10px;  --r-pill: 999px;

  /* ---- Motion --------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;  --dur-2: 220ms;  --dur-3: 380ms;  --dur-4: 620ms;

  /* ---- Z ---------------------------------------------------*/
  --z-map: 1; --z-sticky: 40; --z-header: 60; --z-sheet: 70;
  --z-popover: 80; --z-modal: 90; --z-toast: 100;
}

/* ============================================================
   LIGHT — warm paper, deep ink
   ============================================================ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --paper:      #F7F4EE;   /* page ground */
  --paper-2:    #FFFDF8;   /* raised surface: cards, rows, inputs */
  --paper-3:    #EFEAE0;   /* sunken: wells, thead, code */
  --paper-4:    #E5DFD2;   /* deeper sunken / track */

  --ink:        #12100E;   /* primary text */
  --ink-2:      #4B453C;   /* secondary text */
  --ink-3:      #7D7466;   /* muted / meta */
  --ink-inv:    #FBF9F4;   /* text on dark grounds */

  --rule:       #DED7CA;   /* hairlines */
  --rule-2:     #C7BDA9;   /* stronger rule */

  --brand:      #12483C;   /* deep verdigris */
  --brand-2:    #1B6A57;
  --brand-3:    #2E8A72;
  --brand-tint: #E3EDE8;
  --brand-ink:  #FBF9F4;   /* text on brand */

  --signal:     #E4572E;   /* action / live */
  --signal-2:   #C43F13;
  --signal-tint:#FBE7DE;
  --signal-ink: #FFFFFF;

  --gold:       #B4862B;   /* ratings, featured */
  --gold-tint:  #F6EDD8;

  --ok:         #1B6A57;  --ok-tint:   #E1EDE8;
  --warn:       #A96A0C;  --warn-tint: #F8EDDC;
  --bad:        #AE2B1F;  --bad-tint:  #F8E3E0;
  --info:       #1F5673;  --info-tint: #E1EBF1;

  /* Map palette */
  --map-land:   #E7E0D0;
  --map-water:  #C3D3CE;
  --map-park:   #D5E2CB;
  --map-road:   #FFFDF8;
  --map-road-2: #F6F1E6;
  --map-stroke: #D2C8B4;

  --shadow-1: 0 1px 2px rgba(24,20,14,.06), 0 2px 6px rgba(24,20,14,.05);
  --shadow-2: 0 2px 4px rgba(24,20,14,.07), 0 12px 28px rgba(24,20,14,.10);
  --shadow-3: 0 4px 8px rgba(24,20,14,.08), 0 28px 60px rgba(24,20,14,.16);

  --grain-opacity: .035;
}

/* ============================================================
   DARK — token swap only, no component overrides
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:      #14120F;
  --paper-2:    #1D1A15;
  --paper-3:    #0E0C0A;
  --paper-4:    #262119;

  --ink:        #F3EEE4;
  --ink-2:      #BEB5A6;
  --ink-3:      #8C8375;
  --ink-inv:    #14120F;

  --rule:       #302B24;
  --rule-2:     #484136;

  --brand:      #58B398;
  --brand-2:    #74C7AE;
  --brand-3:    #8FD6C1;
  --brand-tint: #17322B;
  --brand-ink:  #08211B;

  --signal:     #FF7B4F;
  --signal-2:   #FF9871;
  --signal-tint:#35180E;
  --signal-ink: #2B0F05;

  --gold:       #DDAF57;
  --gold-tint:  #33280F;

  --ok:         #5FB99E;  --ok-tint:   #17302A;
  --warn:       #D9A34D;  --warn-tint: #33260F;
  --bad:        #E8705F;  --bad-tint:  #351712;
  --info:       #6FA8C7;  --info-tint: #12242E;

  --map-land:   #1A1713;
  --map-water:  #0F2420;
  --map-park:   #16281B;
  --map-road:   #3A3227;
  --map-road-2: #26201A;
  --map-stroke: #2E2820;

  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.55);
  --shadow-3: 0 4px 8px rgba(0,0,0,.5), 0 28px 60px rgba(0,0,0,.65);

  --grain-opacity: .05;
}

/* Respect OS preference when the user has not chosen explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper:      #14120F;
    --paper-2:    #1D1A15;
    --paper-3:    #0E0C0A;
    --paper-4:    #262119;

    --ink:        #F3EEE4;
    --ink-2:      #BEB5A6;
    --ink-3:      #8C8375;
    --ink-inv:    #14120F;

    --rule:       #302B24;
    --rule-2:     #484136;

    --brand:      #58B398;
    --brand-2:    #74C7AE;
    --brand-3:    #8FD6C1;
    --brand-tint: #17322B;
    --brand-ink:  #08211B;

    --signal:     #FF7B4F;
    --signal-2:   #FF9871;
    --signal-tint:#35180E;
    --signal-ink: #2B0F05;

    --gold:       #DDAF57;
    --gold-tint:  #33280F;

    --ok:         #5FB99E;  --ok-tint:   #17302A;
    --warn:       #D9A34D;  --warn-tint: #33260F;
    --bad:        #E8705F;  --bad-tint:  #351712;
    --info:       #6FA8C7;  --info-tint: #12242E;

    --map-land:   #1A1713;
    --map-water:  #0F2420;
    --map-park:   #16281B;
    --map-road:   #3A3227;
    --map-road-2: #26201A;
    --map-stroke: #2E2820;

    --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
    --shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.55);
    --shadow-3: 0 4px 8px rgba(0,0,0,.5), 0 28px 60px rgba(0,0,0,.65);

    --grain-opacity: .05;
  }
}