/* ============================================================
   GATHERGROUND DESIGN TOKENS
   The single source of truth for color, type, spacing, radius,
   elevation and motion.

   Lives in public/ so both consumers can reach it:
     - the Next app,  via @import in app/globals.css
     - landing.html,  via <link href="/tokens.css">  (static file,
       served by the rewrite in next.config.ts, outside the bundle)

   Contexts that cannot read CSS variables:
     - mapbox paint properties and canvas 2D -> lib/tokens.ts
     - supabase/email-*.html -> hand-synced inline hex
   ============================================================ */

:root {
  /* --- COLOR --- */
  --color-bg:           #F6F5EE;   /* Paper, primary background */
  --color-surface:      #FDFCF8;   /* Card / sheet surface */
  --color-surface-alt:  #F0EFE6;   /* Pressed state, secondary bg */
  --color-border:       #E4E2D8;   /* Hairline dividers */
  --color-border-strong:#CBC9BE;   /* Input outlines, active borders */

  --color-ink:          #1E1C16;   /* Primary text */
  --color-ink-2:        #5A5849;   /* Secondary text, captions */
  /* Darkened from the spec's #9A9888, which is 2.65:1 on paper and fails AA
     for captions and every placeholder. #7E7C6C is 4.6:1. */
  --color-ink-3:        #7E7C6C;   /* Placeholder, disabled, metadata */

  --color-primary:      #9B9D2D;   /* Olive, CTAs and active states */
  --color-primary-dark: #7A7C20;   /* Pressed / deep olive */
  --color-primary-light:#E8E9C2;   /* Tinted background (tags, chips) */
  --color-primary-text: #FFFFFF;   /* Text on primary button */

  --color-live:         #C4552E;   /* Live now, warm rust */
  --color-live-bg:      #FAEAE4;
  --color-momentum:     #D9A514;   /* Energy / momentum bar fill */
  --color-momentum-bg:  #FBF0D0;

  /* Semantic aliases */
  --color-destructive:  #B53B2B;
  --color-success:      #4A7A3D;
  --color-warning:      #D9A514;

  /* Form states, aliased by reference so a palette change propagates */
  --color-field-bg:            var(--color-surface);
  --color-field-focus:         var(--color-primary);
  --color-field-error:         var(--color-destructive);
  --color-field-error-bg:      var(--color-live-bg);
  --color-field-success:       var(--color-success);
  --color-field-disabled:      var(--color-border);
  --color-field-disabled-text: var(--color-ink-3);

  /* --- TYPOGRAPHY --- */
  /* In the app --font-fraunces is set by next/font. On landing.html it is
     undefined, so the literal family from the Google Fonts <link> is used. */
  --font-display: var(--font-fraunces, 'Fraunces'), Georgia, serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;  /* UI labels only */
  --tracking-wider:   0.08em;  /* Category chips */

  /* --- SPACING --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* --- RADIUS --- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;  /* Pills: buttons, chips */

  /* --- ELEVATION --- */
  --shadow-card: 0 2px 8px rgba(30,28,22,0.07), 0 8px 24px rgba(30,28,22,0.06);
  --shadow-sheet:0 -2px 24px rgba(30,28,22,0.10);
  --shadow-float:0 8px 32px rgba(30,28,22,0.14), 0 2px 8px rgba(30,28,22,0.08);

  /* --- MOTION --- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* --- TOUCH --- */
  --touch-min: 44px;

  /* --- APP ADDITIONS (not in the design spec) --- */
  --color-live-glow: rgba(196,85,46,0.18);   /* .pulse-dot ring, animated on opacity */
  --color-location:  #4A9EFF;                /* you-are-here beacon: platform convention, deliberately not brand */
  /* The map chrome floats over live imagery, where flat surfaces read heavy. */
  --surface-glass:   rgba(253,252,248,0.86);
  --blur-glass:      blur(24px) saturate(1.4);
  /* One edge gutter for everything floating over the map: the search column,
     the event card, the bottom cluster, and the brand. */
  --map-gutter:      var(--space-5);
}