/*
 * Alf 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-primary), 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
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * HOW TO CUSTOMISE:
 *   Replace the colour values below with your design's brand palette.
 *   Update font names after self-hosting your chosen typeface in assets/fonts/.
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {

  /* ── Colors ──────────────────────────────────────────────────────────────
   * ALF brand palette — sourced from Figma (kCeitCdnqD4kBmGBsekgiI, node 699:1483)
   * Last synced: 2025-01
   * ────────────────────────────────────────────────────────────────────── */

  /* Brand red */
  --color-primary: #CD261D;
  /* primary CTA, active states, red elements */
  --color-primary-dark: #A41C16;
  /* red gradient end — always pair with primary */

  /* Neutral scale */
  --color-dark: #252525;
  /* dark section backgrounds, dark cards */
  --color-darker: #373737;
  /* card body text on white/light cards */
  --color-black: #0C0C0C;
  /* true black (hero overlay, deepest dark) */
  --color-grey: #ABABAB;
  /* muted text on dark surfaces, dividers */
  --color-bg: #F8FAF0;
  /* page background, light sections, CTA buttons on red */
  --color-white: #FFFFFF;
  /* white cards (process steps 2-5) */

  /* Green (sustainability badge only — not brand green) */
  --color-green: #008236;
  /* Green Manufacturing badge text/border */
  --color-green-bg: #DCFCE7;
  /* Green Manufacturing badge background */
  --color-green-alt: #00A63E;
  /* Sustainability floating badge border */

  /* Accent beige (darker variant — cards, borders) */
  --color-beige: #F0F0E3;
  /* Beige — Figma "Biege" swatch 527:8 */

  /* Semantic aliases */
  --color-text: var(--color-darker);
  --color-text-muted: var(--color-grey);
  --color-text-inverse: var(--color-bg);
  --color-border: rgba(96, 102, 88, 0.3);
  /* component tag borders */
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-bg);
  --color-surface-dark: var(--color-dark);

  /* ── Typography — Family ─────────────────────────────────────────────────
   * Change to your self-hosted font name after adding @font-face in fonts.css.
   * ────────────────────────────────────────────────────────────────────── */
  --font-body: 'Inter', sans-serif;

  /* ── Typography — Desktop Sizes ──────────────────────────────────────────
   * H1 (hero only)   — 72px Regular — Figma: Desktop/D Regular H1
   * H2 (sections)    — 36px SemiBold — Figma: Desktop/D Semi Bold H2
   * H3 (sub-heads)   — 24px Regular  — Figma: Desktop/D Regular H3
   * H4 (card titles) — 20px Regular  — Figma: Desktop/D Regular H4
   * Body LG          — 20px Regular  — intro paragraphs (same as H4 size)
   * Body MD          — 16px Regular  — Figma: Desktop/D Regular Body
   * Body Light       — 16px 300      — Figma: Desktop/D Light Body
   * Body SemiBold    — 16px 600      — Figma: Desktop/D Semi Bold Body
   * Small            — 14px Regular  — step labels (STEP 1, STEP 2…)
   * ────────────────────────────────────────────────────────────────────── */
  --font-size-h1: 72px;
  --font-size-h2: 36px;
  --font-size-h3: 24px;
  --font-size-h4: 20px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 16px;
  --font-size-sm: 14px;

  /* ── Typography — Mobile Sizes ───────────────────────────────────────────
   * M Regular H1 48  — Figma 541:14
   * M Semi Bold H2 32 — Figma 541:15
   * M Regular H3 20  — Figma 1020:1464
   * M Regular H4 20  — Figma 541:16
   * M Regular/Light Body 16
   * M Regular 12
   * ────────────────────────────────────────────────────────────────────── */
  --font-size-h1-mobile: 48px;
  --font-size-h2-mobile: 32px;
  --font-size-h3-mobile: 20px;
  --font-size-h4-mobile: 20px;
  --font-size-xs: 12px;

  /* ── Typography — Weights ────────────────────────────────────────────────
   * ────────────────────────────────────────────────────────────────────── */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ── Section Layout ──────────────────────────────────────────────────────
   * Figma: 1440px canvas, 120px side padding, 160px vertical padding
   * Inner content containers: max-width 1200px
   * Section headers: max-width 896px (centered)
   * ────────────────────────────────────────────────────────────────────── */
  --section-max-width: 1440px;
  --content-max-width: 1200px;
  --header-max-width: 896px;
  --section-pad-desktop: 160px;
  /* py on all major sections */
  --section-pad-x: 120px;
  /* px on all major sections */
  --section-pad-tab-landscape: 80px;
  --section-pad-tab-portrait: 60px;
  --section-pad-mobile: 32px;
  --section-gap-desktop: 40px;
  /* gap between header block + content */
  --section-gap-mobile: 24px;

  /* Figma-specified spacing within sections (node 541:10) */
  --spacing-title-gap: 32px;
  /* between section title and description */
  --spacing-before-content: 40px;
  /* between section header block and content grid */
  --spacing-between-sections: 160px;
  /* vertical gap BETWEEN full sections — desktop */
  --spacing-between-sections-mobile: 120px;
  /* vertical gap BETWEEN full sections — mobile */

  /* ── Spacing scale ───────────────────────────────────────────────────────
   * Use 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 ───────────────────────────────────────────────────────
   * From Figma: 8px (buttons/tags), 10px (component tags), 14px (icon bg),
   *             16px (cards), 24px (sidebar benefit cards), 1000px (pills)
   * ────────────────────────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 1000px;

  /* ── Shadows ─────────────────────────────────────────────────────────────
   * From Figma design token extraction
   * ────────────────────────────────────────────────────────────────────── */
  --shadow-nav: 0 0 48px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0px 20px 12.5px rgba(0, 0, 0, 0.1), 0px 8px 5px rgba(0, 0, 0, 0.1);
  --shadow-badge: 0px 10px 7.5px rgba(0, 0, 0, 0.1), 0px 4px 3px rgba(0, 0, 0, 0.1);
  --shadow-image: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-floating: 0px 25px 25px rgba(0, 0, 0, 0.25);

  /* ── Buttons ─────────────────────────────────────────────────────────────
   * ────────────────────────────────────────────────────────────────────── */
  --btn-height: 56px;
  --btn-padding-y: 16px;
  --btn-padding-x: 28px;
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--font-size-body-md);
  --btn-font-weight: var(--font-weight-semibold);

  /* ── Transitions ─────────────────────────────────────────────────────────
   * ────────────────────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ── Z-index scale ───────────────────────────────────────────────────────
   * ────────────────────────────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-header: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
}