/* =============================================================
   Goldline International — Design Tokens
   Single source of truth. Do not introduce off-system values
   elsewhere in the stylesheets.
   ============================================================= */

:root {
  /* ---------- Color ---------- */
  --gl-bg:           #FFFFFF;            /* page background */
  --gl-surface:      #FAF7EE;            /* warm cream — alt sections (gold-tinted) */
  --gl-surface-2:    #F4EFE1;            /* deeper cream — emphasis surfaces */
  --gl-surface-warm: #FBF6E9;            /* warmest cream — featured sections */
  --gl-ink:          #0F1419;            /* primary text / dark surfaces */
  --gl-ink-2:        #2B313A;            /* secondary text */
  --gl-mute:         #5A6472;            /* body / supporting copy */
  --gl-line:         #E8E2D2;            /* dividers, card borders (gold-tinted) */
  --gl-line-2:       #D4CCB6;            /* stronger lines */
  --gl-gold:         #C9A24B;            /* Goldline accent — placeholder, swap to brand hex */
  --gl-gold-2:       #B58E37;            /* hover / pressed */
  --gl-gold-3:       #8C6E26;            /* deepest gold for borders/text on light */
  --gl-gold-ink:     #0F1419;            /* text on gold */
  --gl-tint-gold:    rgba(201, 162, 75, 0.06);   /* barely-there gold wash */
  --gl-tint-gold-2:  rgba(201, 162, 75, 0.15);   /* visible gold tint for shadows */
  --gl-dark-bg:      #0F1419;            /* inverted sections */
  --gl-dark-bg-2:    #181F2A;            /* slightly lighter dark for variety */
  --gl-dark-ink:     #FFFFFF;
  --gl-dark-mute:    #A6AEBA;

  /* ---------- Gradients (named for reuse) ---------- */
  --gl-grad-cream:    linear-gradient(180deg, var(--gl-surface) 0%, var(--gl-surface-2) 100%);
  --gl-grad-warm:     linear-gradient(180deg, #FFFFFF 0%, var(--gl-surface-warm) 100%);
  --gl-grad-dark:     linear-gradient(180deg, var(--gl-dark-bg) 0%, var(--gl-dark-bg-2) 100%);
  --gl-grad-gold-rule: linear-gradient(90deg, transparent 0%, var(--gl-gold) 50%, transparent 100%);

  /* ---------- Typography ---------- */
  --gl-font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gl-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gl-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gl-fs-12: 0.75rem;
  --gl-fs-14: 0.875rem;
  --gl-fs-16: 1rem;
  --gl-fs-18: 1.125rem;
  --gl-fs-22: 1.375rem;
  --gl-fs-28: 1.75rem;
  --gl-fs-36: 2.25rem;
  --gl-fs-48: 3rem;
  --gl-fs-64: 4rem;

  --gl-lh-tight: 1.15;
  --gl-lh-snug:  1.3;
  --gl-lh-body:  1.6;

  --gl-fw-regular: 400;
  --gl-fw-semibold: 600;
  --gl-fw-bold: 700;

  --gl-tracking-tight: -0.02em;
  --gl-tracking-flat: 0;
  --gl-tracking-wide: 0.06em;       /* eyebrow / uppercase labels */

  /* ---------- Spacing (4-pt scale) ---------- */
  --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:  80px;
  --space-10: 96px;
  --space-11: 112px;
  --space-12: 128px;

  --section-y-desktop: var(--space-10);
  --section-y-mobile:  var(--space-7);

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  /* ---------- Shadows (single elevation) ---------- */
  --shadow: 0 1px 2px rgba(15, 20, 25, 0.04), 0 4px 16px rgba(15, 20, 25, 0.06);

  /* ---------- Layout ---------- */
  --container:    1240px;
  --container-px-desktop: var(--space-7);
  --container-px-mobile:  var(--space-5);

  /* ---------- Motion ---------- */
  --motion-fast: 150ms;
  --motion:      240ms;
  --motion-slow: 360ms;
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------- Z-index ---------- */
  --z-header: 50;
  --z-modal:  100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion:      0ms;
    --motion-slow: 0ms;
  }
}