/* tokens.css
 * Design tokens for the digital courses store (Wisal Trip).
 *
 * Brand palette derived from the Wisal Trip logo:
 *   - Deep emerald background (the green petals of the logo)
 *   - Gold accent (the golden arc and "TRIP" wordmark)
 *   - Cream paper (the warm parchment used for cards on top of the green)
 *
 * Locked rules:
 *   - Page background is deep emerald with a slow animated gradient overlay
 *   - Body / heading text on the green background uses cream / gold tones
 *   - Cards (forms, FAQ items, product cards) sit on cream for legibility
 *   - Primary buttons are gold with dark-green text — high-contrast, premium feel
 *   - One display serif (Newsreader) + one sans (Cairo) + one mono (JetBrains Mono)
 *   - One tone (emerald), inverted only via .tone-night for the footer band
 */

:root {
  /* Brand palette */
  --color-bg-deep:        #0A6E3D;   /* page background — emerald, logo leaves */
  --color-bg-deep-2:      #084D2B;   /* darker emerald for gradient stops */
  --color-bg-deep-3:      #0E8047;   /* lighter emerald for gradient stops */
  --color-gold:           #D4A748;   /* primary accent — logo gold */
  --color-gold-bright:    #F2D27B;   /* hover / highlight gold */
  --color-gold-deep:      #A07F2E;   /* pressed / shadow gold */
  --color-cream:          #FDF6E4;   /* paper for cards on emerald */
  --color-cream-soft:     #F5E7C5;   /* text on emerald */
  --color-cream-muted:    #C8B68B;   /* muted text on emerald */
  --color-night:          #062E1A;   /* very dark emerald — footer / night sections */
  --color-night-muted:    #8FB89A;   /* muted text on dark sections */

  /* Compatibility aliases — kept so existing component CSS still reads. */
  --color-paper:    var(--color-cream);
  --color-surface:  #FFF9EB;        /* cream surface (slightly lighter) */
  --color-ink:      #0A2E1A;        /* dark green ink used on cream */
  --color-muted:    #6F6655;        /* muted text on cream */
  --color-hairline: #E5D6A6;        /* hairline on cream */
  --color-accent:   var(--color-gold);

  /* WhatsApp brand (only on CTAs) */
  --wa-green:        #25D366;
  --wa-green-hover:  #20B858;
  --wa-green-active: #1DA84E;

  /* Fonts */
  --font-display: 'Newsreader', 'Amiri', ui-serif, Georgia, serif;
  --font-sans:    'Cairo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale & tracking */
  --tracking-display: -0.025em;
  --tracking-eyebrow: 0.12em;
  --tracking-mono:    0.02em;

  /* Shape */
  --radius-pill:  9999px;
  --radius-card:  16px;
  --radius-block: 12px;
  --radius-sm:    6px;

  /* Spacing */
  --space-section:    72px;
  --space-section-md: 112px;
  --space-lg:         40px;
  --space-md:         24px;
  --space-sm:         12px;

  /* Layout */
  --container-max: 1280px;
  --container-px:  24px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-luxe:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    150ms;
  --dur-base:    280ms;
  --dur-slow:    600ms;
  --dur-luxe:    1100ms;

  /* Z-index scale */
  --z-base:    1;
  --z-rail:    5;
  --z-nav:     50;
  --z-overlay: 100;
}

@media (min-width: 768px) {
  :root {
    --container-px: 40px;
  }
}