/* ─────────────────────────────────────────
   Taqtile Design Tokens
   ───────────────────────────────────────── */

@font-face {
  font-family: 'Figtree';
  src: url('../assets/branding/Fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('../assets/branding/Fonts/Figtree/Figtree-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Brand Colors (from 2022 + 2024 palettes) ── */
  --color-orange:          #FE6100;
  --color-blue-taqtile:    #112231;
  --color-blue-medium:     #35576D;
  --color-blue-ui:         #18384D;
  --color-blue-highlight:  #27B5EB;
  --color-gray-dark:       #323232;
  --color-gray-light:      #EEEEEE;
  --color-yellow:          #EBA528;
  --color-magenta:         #B83775;
  --color-green:           #77B75A;
  --color-white:           #FFFFFF;

  /* ── Semantic Tokens ── */
  --color-text-primary:    #112231;
  --color-text-body:       #2D3748;
  --color-text-muted:      #64748B;
  --color-text-inverse:    #FFFFFF;
  --color-bg-primary:      #FFFFFF;
  --color-bg-secondary:    #F7F8FA;
  --color-bg-tertiary:     #EEF1F5;
  --color-bg-dark:         #112231;
  --color-border:          #E2E8F0;
  --color-border-light:    #F1F5F9;
  --color-accent:          #FE6100;

  /* ── Typography ── */
  --font-family:           'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* ── Type Scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* ── Line Heights ── */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* ── Spacing ── */
  --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;

  /* ── Layout ── */
  --container-max:  1200px;
  --container-wide: 1400px;
  --nav-height:     72px;

  /* ── Borders ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.11);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 450ms ease;
}