/* ==========================================================================
   DESIGN 33 - GLOBAL DESIGN SYSTEM VARIABLES & DESIGN TOKENS
   Australian Digital Design & Systems for Australian Business
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     1. COLOR PALETTE (ARCHITECTURAL & EDITORIAL NEUTRALS)
     -------------------------------------------------------------------------- */
  --bg-primary: #F4F2EC;   /* paper — warm editorial canvas */
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #EAE7DF;
  --bg-elevated: #FFFFFF;
  --bg-dark: #0B120F;      /* night — near-black eucalypt */
  --bg-dark-surface: #111C17;
  --bg-dark-card: #182922;

  /* Ink / Text Typography Colors */
  --text-primary: #121915;
  --text-secondary: #4E5752;
  --text-tertiary: #505A54;
  --text-inverse: #F3F7F4;
  --text-inverse-muted: #96A69C;

  /* Brand Accents - Australian Editorial Palette */
  --accent-terracotta: #C9542A;
  --accent-terracotta-hover: #A84118;
  --accent-terracotta-subtle: #FDF3EE;
  --accent-terracotta-vivid: #E27244;
  --accent-terracotta-vivid-hover: #F08556;
  
  --accent-eucalyptus: #111C17;
  --accent-eucalyptus-hover: #182922;
  --accent-eucalyptus-light: #EAE7DF;
  
  --accent-ochre: #E5A84B;
  --accent-ochre-subtle: #FAF3E6;

  /* Semantic UI State Tokens */
  --color-success: #16A34A;
  --color-success-subtle: #F0FDF4;
  --color-warning: #D97706;
  --color-warning-subtle: #FFFBEB;
  --color-error: #DC2626;
  --color-error-subtle: #FEF2F2;

  /* Borders & Architectural Dividers */
  --border-subtle: #D9D5CA;   /* warm line */
  --border-medium: #C9C4B8;
  --border-strong: #0B120F;
  --border-dark-subtle: #182922;
  --border-dark-medium: #223A2F;
  --line: #D9D5CA;
  --line-soft: #E6E3DA;

  /* Brand Glow / Accent Halos */
  --glow: rgba(226, 114, 68, 0.38);
  --glow-green: rgba(95, 211, 141, 0.5);

  /* --------------------------------------------------------------------------
     2. TYPOGRAPHY & FONT STACKS
     -------------------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-editorial: "Newsreader", "Georgia", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;

  /* Type Size Scale (Precision Mathematical Steps) */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4.75rem;    /* 76px */

  /* Fluid Display Clamp Tokens (hoisted shared font-size mechanisms) */
  --fs-h1: clamp(2.25rem, 4.4vw, 3.35rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-display-hero: clamp(2.5rem, 4.2vw, 3.8rem);
  --fs-display-section: clamp(2rem, 3.6vw, 3rem);
  --fs-display-sub: clamp(1.45rem, 2.5vw, 2.2rem);
  --fs-lead: clamp(1.125rem, 1.35vw, 1.3rem);
  --fs-manifesto: clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-cta-heading: clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-timeline-number: clamp(2.25rem, 4vw, 3.25rem);

  /* Precision Tracking (Letter-Spacing) Tokens */
  --tracking-hero: -0.04em;
  --tracking-section: -0.035em;
  --tracking-sub: -0.025em;
  --tracking-card: -0.02em;
  --tracking-body: -0.012em;
  --tracking-snug: -0.008em;
  --tracking-mono: 0.08em;
  --tracking-mono-wide: 0.12em;

  /* Precision Leading (Line-Height) Tokens */
  --leading-hero: 1.02;
  --leading-section: 1.08;
  --leading-sub: 1.18;
  --leading-card: 1.24;
  --leading-body: 1.64;
  --leading-prose: 1.68;
  --leading-compact: 1.35;

  /* --------------------------------------------------------------------------
     3. SPACING & RHYTHM (8px BASE GRID & EDITORIAL BREATHING ROOM)
     -------------------------------------------------------------------------- */
  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs: 0.75rem;    /* 12px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.5rem;     /* 24px */
  --space-lg: 2rem;       /* 32px */
  --space-xl: 3rem;       /* 48px */
  --space-2xl: 4.5rem;    /* 72px */
  --space-3xl: 6.5rem;    /* 104px */
  --space-4xl: 9rem;      /* 144px */
  --space-5xl: 12rem;     /* 192px */

  /* Section Padding Scale (clamp for fluid breathing room) */
  --section-pad-hero-top: clamp(4.5rem, 8.5vw, 7.5rem);
  --section-pad-hero-bottom: clamp(5rem, 9.5vw, 8.5rem);
  --section-pad-major: clamp(5.5rem, 9.5vw, 9rem);
  --section-pad-minor: clamp(4rem, 7vw, 6.5rem);
  --section-pad-compact: clamp(3rem, 5vw, 4.5rem);

  /* --------------------------------------------------------------------------
     4. CONTAINERS & BREAKPOINTS
     -------------------------------------------------------------------------- */
  --container-max: 1320px;
  --container-narrow: 920px;
  --container-wide: 1480px;
  --container-gutter: clamp(1.25rem, 4.5vw, 3.5rem);

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-2xl: 1440px;

  /* --------------------------------------------------------------------------
     5. GEOMETRY & BORDER RADII
     -------------------------------------------------------------------------- */
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     6. ARCHITECTURAL ELEVATION & SHADOWS
     -------------------------------------------------------------------------- */
  --shadow-subtle: 0 1px 2px rgba(18, 20, 23, 0.05);
  --shadow-card: 0 8px 24px -8px rgba(18, 20, 23, 0.12);
  --shadow-elevated: 0 20px 48px -12px rgba(18, 20, 23, 0.16);

  /* --------------------------------------------------------------------------
     7. TRANSITIONS & MOTION TIMINGS
     -------------------------------------------------------------------------- */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}