/*
 * InspireSphere Theme — CSS Custom Properties (Design Tokens)
 *
 * Single source of truth for all visual values.
 * Enqueued before all other stylesheets so tokens are always available.
 *
 * NEVER hardcode hex codes or raw px values in component styles.
 * Always reference a token: var(--color-dark-navy), var(--font-size-h1), etc.
 *
 * Token naming convention:
 *   --color-*        Brand / UI colours
 *   --font-*         Font families, sizes, weights
 *   --spacing-*      Generic spacing scale
 *   --section-*      Section layout (padding, max-width, gaps)
 *   --radius-*       Border-radius scale
 *   --shadow-*       Box-shadow presets
 *   --btn-*          Button sizing
 */

:root {

   /* ── Colors ──────────────────────────────────────────────────────────────
     * Source: Figma design tokens
     * Dark Blue  #061C3D — primary dark, hero headings, dark section bg
     * Blue       #034083 — primary blue, nav active, card titles, CTA bg
     * Primary    #0B63E5 — link/active indicator, focus ring
     * Green      #B3D634 — primary CTA button, accent icon bg
     * Black      #262626 — body text
     * Grey       #838E9E — muted / secondary text
     * Light Grey #F1F1F3 — borders, card bg, subtle separators
     * White      #FFFFFF — surfaces
     * Page BG    #FCFCFC — body background
     * ────────────────────────────────────────────────────────────────────── */
   --color-dark-navy: #061C3D;
   --color-blue: #034083;
   --color-primary: #0B63E5;
   --color-green: #B3D634;
   --color-black: #262626;
   --color-grey: #838E9E;
   --color-light-grey: #F1F1F3;
   --color-white: #FFFFFF;
   --color-bg: #FCFCFC;

   /* ── Typography — Family ─────────────────────────────────────────────────
     * Single font: Poppins loaded via fonts.css (self-hosted TTF, assets/fonts/)
     * ────────────────────────────────────────────────────────────────────── */
   --font-body: 'Poppins', sans-serif;

   /* ── Typography — Desktop Sizes ──────────────────────────────────────────
     * H1 (hero only)  — 40px Bold    — one per page, never repeat
     * H2 (sections)   — 36px SemiBold
     * H3 (sub-heads)  — 24px SemiBold
     * H4 (card titles)— 20px Bold
     * Body LG         — 20px Regular — intro paragraphs
     * Body MD         — 16px Regular — general copy, nav links, buttons
     * Display         — 60px Bold    — decorative card numerals (not semantic)
     * ────────────────────────────────────────────────────────────────────── */
   --font-size-h1: 40px;
   --font-size-h2: 36px;
   --font-size-h3: 24px;
   --font-size-h4: 20px;
   --font-size-body-lg: 20px;
   --font-size-body-md: 16px;
   --font-size-display: 60px;

   /* ── Typography — Weights ────────────────────────────────────────────────
     * Regular   400
     * Medium    500
     * SemiBold  600
     * Bold      700
     * ────────────────────────────────────────────────────────────────────── */
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   /* ── Typography — Mobile Sizes ───────────────────────────────────────────
     * H1 mobile    — 28px Bold
     * H2 mobile    — 24px SemiBold
     * H3 mobile    — 20px SemiBold
     * Body mobile  — 16px Regular
     * ────────────────────────────────────────────────────────────────────── */
   --font-size-h1-mobile: 28px;
   --font-size-h2-mobile: 24px;
   --font-size-h3-mobile: 20px;

   /* ── Section Layout ──────────────────────────────────────────────────────
     * max-width: 1320px at 1440px viewport (60px padding each side)
     * Section gap: 120px between sections (desktop)
     * ────────────────────────────────────────────────────────────────────── */
   --section-max-width: 1320px;
   --section-pad-desktop: 60px;
   --section-pad-tab-landscape: 44px;
   --section-pad-tab-portrait: 36px;
   --section-pad-mobile: 16px;
   --section-gap-desktop: 60px;
   --section-gap-mobile: 64px;

   /* ── Spacing scale ───────────────────────────────────────────────────────
     * Use these for gap, padding, margin values inside components.
     * ────────────────────────────────────────────────────────────────────── */
   --spacing-xs: 8px;
   --spacing-sm: 12px;
   --spacing-md: 20px;
   --spacing-lg: 32px;
   --spacing-xl: 48px;
   --spacing-xxl: 80px;

   /* ── Border Radius ───────────────────────────────────────────────────────
     * sm   4px  — small tags
     * md   6px  — buttons, cards (Figma: 6-10px)
     * lg   12px — Fun-Fact chips
     * xl   20px — nav pill
     * ────────────────────────────────────────────────────────────────────── */
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 10px;
   --radius-xl: 20px;

   /* ── Shadows ─────────────────────────────────────────────────────────────
     * nav      — floating nav pill (Figma: 0 0 48px rgba(6,28,61,0.05))
     * card     — standard card shadow
     * ────────────────────────────────────────────────────────────────────── */
   --shadow-nav: 0 0 48px 0 rgba(6, 28, 61, 0.05);
   --shadow-card: 0 4px 24px 0 rgba(6, 28, 61, 0.08);

   /* ── Buttons ─────────────────────────────────────────────────────────────
     * Height:  56px
     * Padding: 16px top/bottom, 20px left/right (Figma)
     * ────────────────────────────────────────────────────────────────────── */
   --btn-height: 56px;
   --btn-padding-y: 16px;
   --btn-padding-x: 20px;
   --btn-radius: var(--radius-md);
}