/* ---------------------------------------------------------------
   tokens.css — TMRW.com Marketing Design Layer
   Single source of truth for design tokens.
   See: _analysis/03-marketing-design-layer.md §2
--------------------------------------------------------------- */

:root {
  /* ------------------------------------------------------------
     Surfaces — editorial
     ------------------------------------------------------------ */
  --color-surface-page:        #fbf9f0;   /* light tone cream */
  --color-surface-page-soft:   #f8f6f2;   /* cooler section break */
  --color-surface-inverse:     #1a1a1a;   /* dark editorial section */
  --color-surface-overlay:     rgba(26, 26, 26, 0.45); /* media hero overlay */

  /* ------------------------------------------------------------
     Text
     ------------------------------------------------------------ */
  --color-text-primary:        #1a1a1a;
  --color-text-secondary:      rgba(31, 39, 27, 0.6);
  --color-text-tertiary:       rgba(31, 39, 27, 0.4);
  --color-text-on-dark:        #fbf9f0;
  --color-text-on-dark-muted:  rgba(248, 246, 242, 0.7);

  /* ------------------------------------------------------------
     Borders
     ------------------------------------------------------------ */
  --color-border-subtle:       rgba(31, 39, 27, 0.2);
  --color-border-on-dark:      rgba(255, 255, 255, 0.2);

  /* ------------------------------------------------------------
     Brand action
     ------------------------------------------------------------ */
  --color-action-primary:        #1832ba;   /* TMRW signature blue */
  --color-action-primary-hover:  #1226a0;
  --color-action-primary-soft:   rgba(24, 50, 186, 0.08);

  /* ------------------------------------------------------------
     Status (form messages only)
     ------------------------------------------------------------ */
  --color-status-success:      #047857;
  --color-status-warning:      #b45309;
  --color-status-danger:       #b91c1c;

  /* ------------------------------------------------------------
     Typography — single font: Söhne Buch
     ------------------------------------------------------------ */
  --font-sans:  "Söhne Buch", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, "SFMono-Regular", "Courier New", monospace;

  /* Editorial scale (one Display per page) */
  --type-display-lg:   clamp(56px, 9vw, 120px);
  --type-display:      clamp(48px, 6vw, 88px);
  --type-title:        clamp(32px, 3.6vw, 48px);
  --type-subtitle:     24px;
  --type-body-lg:      18px;
  --type-body:         16px;
  --type-caption:      13px;
  --type-eyebrow:      12px;

  /* Line heights */
  --leading-display:   1.05;
  --leading-title:     1.15;
  --leading-body:      1.5;

  /* Tracking */
  --tracking-display:  -0.02em;
  --tracking-title:    -0.01em;
  --tracking-eyebrow:  0.08em;

  /* ------------------------------------------------------------
     Spacing — 4-pt rhythm
     ------------------------------------------------------------ */
  --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;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ------------------------------------------------------------
     Layout
     ------------------------------------------------------------ */
  --layout-max:    1440px;
  --layout-gutter: clamp(20px, 4vw, 64px);
  --grid-cols:     12;
  --grid-gap:      24px;

  --bp-mobile:  768px;
  --bp-tablet: 1024px;
  --bp-large:  1440px;

  /* ------------------------------------------------------------
     Motion
     ------------------------------------------------------------ */
  --motion-quick:     0.15s;
  --motion-enter:     0.22s;
  --motion-emphasis:  0.40s;
  --motion-editorial: 0.80s;
  --ease-standard:    cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);

  /* ------------------------------------------------------------
     Accessibility
     ------------------------------------------------------------ */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
  --focus-ring-color:  var(--color-action-primary);
  --touch-target-min:  44px;
}