/* ==========================================================================
   TRDG Design Tokens — Official (Brand Guidelines v1.1)
   Source: TRDG-Brand-Guidelines-1.1.pdf
   ========================================================================== */

:root {
  /* === Anchor === */
  --dusk: #1F1630;
  --dawn: #FAFAF2;

  /* === Brights === */
  --ocean:  #75DEE0;
  --orchid: #D6BAFA;
  --sky:    #70BAFC;
  --sunset: #FC615C;
  --sun:    #FAD685;

  /* === Pastels === */
  --seafoam:    #CCF7E8;
  --lavender:   #F5EDFF;
  --reflection: #D6E3FA;
  --shell:      #FFCFCF;
  --sand:       #FFF2D1;

  /* === Semantic aliases === */
  --color-bg:        var(--dawn);
  --color-fg:        var(--dusk);
  --color-accent:    var(--orchid);
  --color-link:      var(--sky);
  --color-error:     var(--sunset);
  --color-success:   var(--seafoam);
  --color-highlight: var(--sun);
  --color-info:      var(--ocean);

  /* Hovers (darkened brights) */
  --orchid-deep:  #B080ED;
  --sky-deep:     #4E9CE8;

  /* === Type === */
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: var(--font-body);

  --text-hero:     clamp(2.25rem, 8vw, 4.75rem);
  --text-h1:       clamp(2rem, 4vw, 3rem);
  --text-h2:       clamp(1.75rem, 3vw, 2.25rem);
  --text-h3:       1.5rem;
  --text-h4:       1.125rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-small:    0.875rem;
  --text-label:    0.8125rem;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.02em;

  /* === Spacing (4/8 rhythm) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === Radius (speech-bubble feel from logo) === */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* === Container === */
  --container-max: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* === Shadows (soft, warm) === */
  --shadow-sm: 0 1px 2px rgba(31, 22, 48, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(31, 22, 48, 0.10);
  --shadow-lg: 0 24px 48px -16px rgba(31, 22, 48, 0.14);

  /* === Transitions === */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 500ms;
}