/* ============================================================
   Delancey Street — Design Tokens
   Source: components/shared.jsx constant `C` + handoff/theme/tokens.css
   ============================================================ */

:root {
  /* Brand */
  --ds-cyan:        #00B8F0;
  --ds-cyan-deep:   #0089B8;
  --ds-cyan-soft:   #E7F3FA;
  /* Accessible cyan for small text on white (≥4.5:1 contrast) */
  --ds-cyan-text:   #006E94;

  /* Ink */
  --ds-ink:         #0F1A2D;
  --ds-ink-2:       #1F2C42;
  --ds-ink-3:       #3A4863;
  --ds-ink-deep:    #0a121f;

  /* Paper */
  --ds-paper:       #F4F8FB;
  --ds-paper-2:     #E7F3FA;
  --ds-white:       #FFFFFF;

  /* Lines + muted */
  --ds-line:        #DDE4EC;
  --ds-line-soft:   #EEF2F6;
  --ds-muted:       #5C6A7E;
  --ds-muted-2:     #8A95A6;

  /* Status */
  --ds-success:     #1FAE6F;
  --ds-warn:        #E0A82E;
  --ds-danger:      #D14B4B;
  --ds-gold:        #FFB400;

  /* Type */
  --ds-font:        'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ds-font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ds-fs-display:  clamp(48px, 6vw, 84px);
  --ds-fs-h1:       clamp(36px, 4.2vw, 56px);
  --ds-fs-h2:       clamp(28px, 3vw, 40px);
  --ds-fs-h3:       clamp(22px, 2.2vw, 28px);
  --ds-fs-h4:       18px;
  --ds-fs-body:     17px;
  --ds-fs-small:    14px;
  --ds-fs-tiny:     12px;
  --ds-lh-tight:    1.1;
  --ds-lh-snug:     1.25;
  --ds-lh-body:     1.55;
  --ds-lh-loose:    1.7;
  --ds-fw-regular:  400;
  --ds-fw-medium:   500;
  --ds-fw-semibold: 600;
  --ds-fw-bold:     700;
  --ds-fw-heavy:    800;
  --ds-fw-black:    900;
  --ds-tracking-tight:   -0.02em;
  --ds-tracking-snug:    -0.01em;
  --ds-tracking-normal:  0;
  --ds-tracking-wide:    0.02em;
  --ds-tracking-eyebrow: 0.16em;
  --ds-tracking-caps:    0.18em;

  /* Layout */
  --ds-page-max:        1280px;
  --ds-page-max-wide:   1440px;
  --ds-page-pad-x:      60px;
  --ds-page-pad-x-mob:  20px;

  /* Vertical rhythm */
  --ds-section-y:        120px;
  --ds-section-y-tight:  96px;
  --ds-section-y-banner: 72px;
  --ds-section-y-mob:    72px;

  /* Radii */
  --ds-radius-input:  10px;
  --ds-radius-button: 12px;
  --ds-radius-card:   24px;
  --ds-radius-pill:   999px;

  /* Shadows */
  --ds-shadow-card:      0 8px 30px rgba(0, 0, 0, .06);
  --ds-shadow-pop:       0 18px 40px rgba(0, 0, 0, .10);
  --ds-shadow-card-pop:  0 30px 80px -20px rgba(15, 26, 45, .20);
  --ds-shadow-cta:       0 12px 30px -8px rgba(0, 184, 240, .55);
  --ds-shadow-cta-hover: 0 18px 40px -10px rgba(0, 184, 240, .7);

  /* Motion */
  --ds-ease:      cubic-bezier(.2, .7, .2, 1);
  --ds-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ds-dur-fast:  160ms;
  --ds-dur:       220ms;
  --ds-dur-slow:  420ms;

  /* Z-index */
  --ds-z-nav:     100;
  --ds-z-overlay: 500;
  --ds-z-modal:   1000;

  /* VS / Comparison Tables — unified tokens */
  --ds-vs-cell-pad-y:      20px;
  --ds-vs-cell-pad-x:      24px;
  --ds-vs-head-bg:         var(--ds-ink);
  --ds-vs-head-fg:         #fff;
  --ds-vs-head-fs:         12px;
  --ds-vs-head-tracking:   0.14em;
  --ds-vs-head-fw:         800;
  --ds-vs-row-fs:          14.5px;
  --ds-vs-row-fw:          600;
  --ds-vs-zebra:           #F5FAFC;
  --ds-vs-col-ds-bg:       var(--ds-cyan-soft);
  --ds-vs-col-ds-zebra:    #DDF1F8;
  --ds-vs-check-size:      20px;
  --ds-vs-check-bg:        var(--ds-cyan);
  --ds-vs-check-fg:        #fff;
  --ds-vs-x-bg:            rgba(15, 26, 45, .06);
  --ds-vs-x-fg:            var(--ds-muted-2);
}

/* ============================================================
   Mobile padding swap — single source of truth.
   Without this, --ds-page-pad-x-mob (defined above) is dead code
   and the desktop 60px page padding bleeds onto phones, eating
   ~120px of horizontal space and clipping content at the right
   edge across every page. Breakpoint matches the theme's
   primary mobile breakpoint (800px) used throughout main.css.
   ============================================================ */
@media (max-width: 800px) {
  :root {
    --ds-page-pad-x: var(--ds-page-pad-x-mob);
  }
}