/* =============================================================================
   PADDLEBOARDER AI DESIGN SYSTEM — DESIGN TOKENS
   Single source of truth for all marketing HTML (components, patterns, examples,
   explorer). Link it: <link rel="stylesheet" href="/assets/tokens.css">
   Palette from the Paddleboarder Brand Guideline: cyan #00D6FF, mint #25F6C1,
   deep teal #006A80 — a pure cool-water spectrum, no warm accent. Light-first;
   "Night Paddle" dark theme is opt-in via [data-theme="dark"].
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     0. CORE PALETTE — the working brand colors (Paddleboarder Brand Guideline)
        ★ Reach for these FIRST. The ramps in §1 are the extended reference
        superset used for tints/shades/states and functional colors.
        Color story: the shoreline as a single depth-of-water spectrum —
        cyan surface, mint shallows, teal depths. Cyan is the invitation;
        teal is the trust; mint is the freshness.
     --------------------------------------------------------------------------- */
  --cyan:#00D6FF;               /* PRIMARY brand accent — surface water, buttons */
  --pale-cyan:#E7FBFF;          /* softest cyan wash — section backgrounds */
  --mint:#25F6C1;               /* secondary — aqua shallows, warm-cool balance */
  --deep-teal:#006A80;          /* body text + primary CTA anchor */
  --light-grey:#DDDDDD;         /* hairlines, dividers, quiet UI */
  --mid-grey:#6A6A6A;           /* secondary text, captions */
  --black:#000000;
  --white:#FFFFFF;

  /* ---------------------------------------------------------------------------
     1. EXTENDED RAMPS — reference superset. base = 500.
        Use for tints/shades/states + functional colors absent from §0.
     --------------------------------------------------------------------------- */

  /* Cyan — CORE color · surface water, brand accent */
  --cyan-050:#E7FBFF; --cyan-100:#C7F5FF; --cyan-200:#9BEEFF; --cyan-300:#66E4FF;
  --cyan-400:#33DBFF; --cyan-500:#00D6FF; --cyan-600:#00AED1; --cyan-700:#0088A3;
  --cyan-800:#006480; --cyan-900:#00404F; --cyan-950:#001F26;

  /* Mint — secondary · shallows, freshness */
  --mint-050:#E9FEF7; --mint-100:#CBFCEC; --mint-200:#93F8D9; --mint-300:#60F3C9;
  --mint-400:#3AEDBB; --mint-500:#25F6C1; --mint-600:#0FCA9E; --mint-700:#0A9E7B;
  --mint-800:#077257; --mint-900:#054636; --mint-950:#022019;

  /* Teal — deep water · body copy, dark bands, trust */
  --teal-050:#E6F1F4; --teal-100:#BFDCE4; --teal-200:#8DBFCC; --teal-300:#5AA1B3;
  --teal-400:#308599; --teal-500:#006A80; --teal-600:#00566B; --teal-700:#004354;
  --teal-800:#00303E; --teal-900:#001E29; --teal-950:#000E14;

  /* Green — success / conditions good / go paddle */
  --green-050:#EEFBF3; --green-100:#D0F5DE; --green-200:#A2EABE; --green-300:#68DA97;
  --green-400:#35C273; --green-500:#1E9E5A; --green-600:#178049; --green-700:#116237;
  --green-800:#0C4527; --green-900:#072B18; --green-950:#02130A;

  /* Amber — caution / conditions advisory */
  --amber-050:#FDF8ED; --amber-100:#FAEBC8; --amber-200:#F5D68D; --amber-300:#EFBC4E;
  --amber-400:#E3A222; --amber-500:#C78710; --amber-600:#A26B0C; --amber-700:#7C500A;
  --amber-800:#573807; --amber-900:#372304; --amber-950:#180F01;

  /* Red — error / hazard / do not launch */
  --red-050:#FCEFED; --red-100:#F8D3CD; --red-200:#F2A79C; --red-300:#EA7767;
  --red-400:#DE4B36; --red-500:#C6301B; --red-600:#A32615; --red-700:#7C1D10;
  --red-800:#57140B; --red-900:#360C07; --red-950:#180402;

  /* Grayscale — cool neutrals (UI chrome, dividers) */
  --gray-050:#FCFCFC; --gray-100:#ECECEC; --gray-200:#DDDDDD; --gray-300:#C5C5C5;
  --gray-400:#B2B2B2; --gray-500:#9F9F9F; --gray-600:#8B8B8B; --gray-700:#6A6A6A;
  --gray-800:#404040; --gray-900:#2A2A2A; --gray-950:#161616;

  /* --black / --white are defined in §0 (core palette) */

  /* ---------------------------------------------------------------------------
     2. SEMANTIC COLOR (light-first — marketing default)
        Mapped to §0 CORE PALETTE first; states fall back to §1.
     --------------------------------------------------------------------------- */
  --color-bg:            var(--white);         /* #FFFFFF — pure white canvas */
  --color-bg-deep:       var(--pale-cyan);     /* #E7FBFF pale-cyan section bg */
  --color-bg-overlay:    rgba(0,42,52,0.55);   /* modal / lightbox scrim */
  --color-surface:       var(--white);         /* cards / panels */
  --color-surface-2:     #F5FBFD;              /* elevated / hover surface */
  --color-border:        rgba(0,106,128,0.14); /* hairline (deep teal based) */
  --color-border-strong: rgba(0,106,128,0.28);

  --color-text:          var(--deep-teal);     /* #006A80 primary text */
  --color-text-muted:    #4A7A88;              /* secondary copy */
  --color-text-dim:      var(--mid-grey);      /* #6A6A6A tertiary / captions */
  --color-text-inverse:  var(--white);         /* text on dark bands/photos */

  --color-link:          var(--deep-teal);     /* #006A80 text links (matches body) */
  --color-action:        var(--cyan);          /* #00D6FF primary CTA fill */
  --color-action-hover:  var(--cyan-600);      /* #00AED1 CTA hover */
  --color-action-pressed:var(--cyan-700);      /* CTA pressed */
  --color-focus:         var(--cyan-500);      /* focus ring */
  --color-disabled:      rgba(0,106,128,0.35); /* disabled fg (pair w/ .45 opacity) */
  --color-water:         var(--cyan);          /* water-story accent */
  --color-freshness:     var(--mint);          /* mint-story accent */
  --color-depth:         var(--deep-teal);     /* deep-water accent */

  /* Functional colors */
  --color-success: var(--green-600);
  --color-warning: var(--amber-600);
  --color-danger:  var(--red-500);
  --color-info:    var(--cyan-700);

  /* ---------------------------------------------------------------------------
     3. GRADIENTS  (the shoreline as depth — surface → shallows → deep)
     --------------------------------------------------------------------------- */
  /* Brand gradients — cyan → mint blends, no warm counterpoint */
  --grad-morning-mist:   linear-gradient(120deg, var(--cyan-100), var(--mint-100));
  --grad-open-water:     linear-gradient(120deg, var(--cyan-500), var(--mint-500));
  --grad-shorebreak:     linear-gradient(120deg, var(--cyan-600), var(--mint-400));
  --grad-foam-crest:     linear-gradient(120deg, var(--mint-400), var(--cyan-300));
  --grad-midnight-tide:  linear-gradient(120deg, var(--teal-800), var(--cyan-900));
  /* Story gradients — fade from deep water for water-forward moments */
  --grad-deep-channel:   linear-gradient(160deg, var(--teal-900), var(--cyan-700));
  --grad-under-current:  linear-gradient(160deg, var(--teal-900), var(--mint-700));
  /* Hero / page ground — FLAT by design.
     These were radial "spotlight haze" washes; a floating radial glow behind a
     hero is an AI design tell (see brand/ai-design-tells.md, rule 22). They are
     now solid surfaces so composition and type do the work, not ambient light.
     Names kept so existing references keep resolving. */
  --surface-hero: var(--pale-cyan);
  --surface-page:        var(--color-bg);
  /* Number/text gradients (stat numbers, accent words) */
  --grad-text:      linear-gradient(120deg, var(--white), var(--mint-200));       /* on dark bands */
  --grad-text-deep: linear-gradient(120deg, var(--deep-teal), var(--cyan));       /* on light surfaces */

  /* ---------------------------------------------------------------------------
     4. TYPOGRAPHY
        Two families, one workhorse (DIN Next) + one display accent (Avant Garde).
     --------------------------------------------------------------------------- */
  --font-sans:'DIN Next LT Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display:'ITC Avant Garde Gothic', 'DIN Next LT Pro', system-ui, sans-serif;

  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-bold:700;

  /* Type scale — size / line-height / tracking */
  /* Scale ratio is a consistent ~1.27 (major-third-ish). Every step clears the
     1.25 minimum — steps closer than that read as an undesigned default ramp. */
  --text-display-size:68px;  --text-display-lh:1.0;  --text-display-ls:-0.01em;
  --text-h1-size:54px;       --text-h1-lh:1.05;      --text-h1-ls:-0.01em;
  --text-h2-size:42px;       --text-h2-lh:1.1;       --text-h2-ls:-0.01em;
  --text-h3-size:33px;       --text-h3-lh:1.15;      --text-h3-ls:0;
  --text-h4-size:26px;       --text-h4-lh:1.25;      --text-h4-ls:0;
  --text-h5-size:20px;       --text-h5-lh:1.35;      --text-h5-ls:0;
  --text-h6-size:16px;       --text-h6-lh:1.4;       --text-h6-ls:0;
  --text-body-lg-size:18px;  --text-body-lg-lh:1.5;  --text-body-lg-ls:0;
  --text-body-size:16px;     --text-body-lh:1.5;     --text-body-ls:0;
  --text-sm-size:14px;       --text-sm-lh:1.5;       --text-sm-ls:0;
  --text-label-size:13px;    --text-label-lh:1.35;   --text-label-ls:0.01em;
  --text-caption-size:12.5px;--text-caption-lh:1.45; --text-caption-ls:0;
  --text-overline-size:12px; --text-overline-lh:1.4; --text-overline-ls:0.14em;

  /* ---------------------------------------------------------------------------
     5. LAYOUT & SPACING
     --------------------------------------------------------------------------- */
  --container-max:1252px;   /* content max-width */
  --page-width:1440px;      /* desktop artboard reference */
  --gutter:clamp(20px, 6vw, 94px);  /* ~94px desktop gutter */
  --col-hero:854px;         /* hero text column */
  --col-body:650px;         /* body copy column */

  /* Breakpoints: xl ≥1440 · lg 1024 · md 768 · sm 390. Responsive behavior is authored. */

  /* Spacing scale — 4px base */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --section-y:clamp(56px, 9vw, 112px);  /* vertical rhythm between page sections */

  /* Radius — buttons 8 · inner media 11 · md 12 · cards 20 · xl 28 · pill 999 */
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --radius-button:var(--radius-sm);   /* 8px */
  --radius-card:var(--radius-lg);     /* 20px */
  --radius-image:11px;                /* inner media radius */

  /* Sizing tokens */
  --nav-height:62px; --btn-height:52px; --btn-height-lg:56px;

  /* Button styles — cyan fill with teal text (matches live paddleboarder.com) */
  --btn-text-size:17px; --btn-text-lh:24px;
  --btn-pad-y:12px; --btn-pad-x:28px;
  --btn-primary-bg:     var(--cyan);          /* solid cyan — the brand button */
  --btn-primary-text:   var(--deep-teal);     /* teal-on-cyan reads warm and confident */
  --btn-primary-border: 1px solid transparent;
  --btn-secondary-bg:   var(--white);         /* white with teal border */
  --btn-secondary-text: var(--deep-teal);
  --btn-secondary-border: 1px solid var(--deep-teal);

  /* ---------------------------------------------------------------------------
     6. ELEVATION, GLOW & MOTION
     --------------------------------------------------------------------------- */
  --shadow-sm:0 1px 2px rgba(0,42,52,0.08);
  --shadow-md:0 8px 30px rgba(0,42,52,0.10);
  --shadow-lg:0 24px 70px rgba(0,42,52,0.14);
  --glow-cyan:0 0 60px rgba(0,214,255,0.40);
  --glow-mint:0 0 60px rgba(37,246,193,0.35);

  --dur-fast:150ms; --dur:250ms; --dur-slow:500ms;
  --ease-glide:cubic-bezier(0.22, 0.61, 0.36, 1);     /* brand motion — a board gliding to rest */
  --ease-standard:cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------------------------------------
   NIGHT PADDLE — dark theme (opt-in via data-theme)
   ----------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg:var(--teal-950);
  --color-bg-deep:var(--teal-900);
  --color-surface:rgba(199,245,255,0.05);
  --color-surface-2:rgba(199,245,255,0.09);
  --color-border:rgba(155,238,255,0.16);
  --color-border-strong:rgba(155,238,255,0.30);
  --color-text:var(--white);
  --color-text-muted:var(--teal-200);
  --color-text-dim:var(--teal-300);
  --color-text-inverse:var(--deep-teal);
  --color-link:var(--cyan-300);
  --color-action:var(--cyan);
  --color-action-hover:var(--cyan-400);
  --color-action-pressed:var(--cyan-600);
  --surface-page:        var(--color-bg);
  --surface-hero: var(--teal-900);
  --grad-text-deep: linear-gradient(120deg, var(--cyan-200), var(--mint-300));
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 8px 30px rgba(0,0,0,0.45);
  --shadow-lg:0 24px 70px rgba(0,0,0,0.55);
}

/* -----------------------------------------------------------------------------
   OPTIONAL BASE HELPERS  (lightweight; components define their own CSS)
   ----------------------------------------------------------------------------- */
.h-display{ font:var(--weight-bold) var(--text-display-size)/var(--text-display-lh) var(--font-display); letter-spacing:var(--text-display-ls); }
.h1{ font:var(--weight-bold) var(--text-h1-size)/var(--text-h1-lh) var(--font-sans); letter-spacing:var(--text-h1-ls); }
.h2{ font:var(--weight-bold) var(--text-h2-size)/var(--text-h2-lh) var(--font-sans); letter-spacing:var(--text-h2-ls); }
.h3{ font:var(--weight-medium) var(--text-h3-size)/var(--text-h3-lh) var(--font-sans); letter-spacing:var(--text-h3-ls); }
.body-lg{ font:var(--weight-regular) var(--text-body-lg-size)/var(--text-body-lg-lh) var(--font-sans); letter-spacing:var(--text-body-lg-ls); }
.overline{ font:var(--weight-medium) var(--text-overline-size)/var(--text-overline-lh) var(--font-sans); letter-spacing:var(--text-overline-ls); text-transform:uppercase; color:var(--color-link); }
.u-container{ max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter); }