/**
 * BAY MIGRATION GLOBAL DESIGN TOKENS
 * Strict Light-First Professional Services Architecture
 * 
 * Rules:
 * 1. Never hardcode colors, spacing, typography sizes, or radii in components.
 * 2. All values must reference these tokens via var(--token-name).
 */

:root {
  /* =========================================================================
     1. COLOR SYSTEM (70-85% Light / 15-30% Dark)
     ========================================================================= */

  /* Backgrounds */
  --color-bg-primary: #ffffff;             /* Main content, primary sections, clean reading */
  --color-bg-secondary: #f8fafc;           /* Light slate/off-white for section separation */
  --color-bg-tertiary: #f1f5f9;            /* Subtle card surface / hover state */
  --color-bg-warm: #fafaf9;                /* Warm Australian editorial tint */
  --color-bg-card: #ffffff;                /* Default card fill */
  --color-bg-card-subtle: #f8fafc;         /* Card on white background */
  --color-bg-card-hover: #f1f5f9;          /* Interactive hover */
  
  /* Strategic Dark Accents (15-30% selective usage: CTA, Footer, Policy Briefing) */
  --color-bg-dark: #0b1526;                /* Executive Deep Navy */
  --color-bg-dark-surface: #132238;        /* Dark card surface */
  --color-bg-dark-footer: #060c16;         /* Grounded Midnight Footer */
  --color-bg-dark-hover: #1c2e4a;          /* Dark interactive hover */

  /* Typography / Text Colors (High Contrast on Light) */
  --color-text-primary: #0f172a;           /* Near-black charcoal for H1-H4 & primary body */
  --color-text-secondary: #334155;         /* Dark slate for secondary copy & list items */
  --color-text-muted: #64748b;             /* Neutral slate for captions, metadata, dates */
  --color-text-light: #94a3b8;             /* Subtle tertiary hints, borders */
  
  /* Inverse Typography (On Dark Accents) */
  --color-text-inverse: #ffffff;           /* Primary text on dark sections */
  --color-text-inverse-secondary: #cbd5e1; /* Secondary text on dark sections */
  --color-text-inverse-muted: #94a3b8;     /* Muted labels on dark sections */

  /* Brand Palette (Grounded Australian Professional Services) */
  --color-brand-primary: #0284c7;          /* Bay Migration Blue (Primary Action) */
  --color-brand-primary-hover: #0369a1;    /* Deepened Blue for hover states */
  --color-brand-primary-active: #075985;   /* Active / pressed state */
  --color-brand-primary-soft: #e0f2fe;     /* Soft blue tint for pills & badges */
  --color-brand-primary-border: #bae6fd;   /* Soft blue border */
  
  --color-brand-navy: #0f243e;             /* Corporate Australian Authority Navy */
  --color-brand-navy-light: #1e3a5f;       /* Mid-Navy */

  /* Warm Accent / Trust Ochre (Accreditation, Stars, Priority Badges) */
  --color-accent-gold: #d97706;            /* Refined Australian Gold/Amber */
  --color-accent-gold-hover: #b45309;      /* Darker amber */
  --color-accent-gold-soft: #fef3c7;       /* Soft gold tint for MARA highlight */
  --color-accent-gold-border: #fde68a;     /* Accent border */

  /* System & Status Colors */
  --color-success: #059669;                /* Emerald for verified approvals & grants */
  --color-success-soft: #ecfdf5;           /* Light emerald surface */
  --color-success-border: #a7f3d0;
  --color-warning: #d97706;                /* Timelines / requirements notice */
  --color-danger: #dc2626;                 /* Refusal / visa expiry alert */

  /* Borders & Dividers */
  --color-border: #e2e8f0;                 /* Standard subtle 1px border */
  --color-border-subtle: #f1f5f9;          /* Ultra-light hairline divider */
  --color-border-strong: #cbd5e1;          /* Form input & card active borders */
  --color-border-dark: #1e293b;            /* Border inside dark sections */
  --color-border-dark-subtle: rgba(255, 255, 255, 0.08);

  /* =========================================================================
     2. TYPOGRAPHY SYSTEM
     ========================================================================= */
  
  /* Font Families */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Fluid Type Scale (Responsive clamp tokens) */
  --text-display: clamp(2.5rem, 5vw + 1rem, 4.25rem);       /* 40px -> 68px */
  --text-h1: clamp(2.125rem, 3.5vw + 0.5rem, 3.25rem);      /* 34px -> 52px */
  --text-h2: clamp(1.625rem, 2.25vw + 0.25rem, 2.25rem);    /* 26px -> 36px */
  --text-h3: clamp(1.25rem, 1.25vw + 0.25rem, 1.625rem);    /* 20px -> 26px */
  --text-h4: 1.25rem;                                       /* 20px */
  --text-body-lg: 1.125rem;                                 /* 18px */
  --text-body: 1rem;                                        /* 16px */
  --text-body-sm: 0.875rem;                                 /* 14px */
  --text-caption: 0.75rem;                                  /* 12px */
  --text-eyebrow: 0.6875rem;                                /* 11px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tighter: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* =========================================================================
     3. SPACING & LAYOUT SYSTEM
     ========================================================================= */

  --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: 4rem;        /* 64px */
  --space-3xl: 6rem;        /* 96px */
  --space-4xl: 8rem;        /* 128px */

  /* Section Vertical Padding Scale */
  --section-space-sm: clamp(3rem, 5vw, 4.5rem);             /* 48px - 72px */
  --section-space-md: clamp(4.5rem, 7vw, 6.5rem);           /* 72px - 104px */
  --section-space-lg: clamp(6rem, 9vw, 8.5rem);             /* 96px - 136px */

  /* Layout Containers */
  --container-max: 1280px;
  --container-wide: 1400px;
  --container-narrow: 880px;
  --container-gutter: clamp(1rem, 3vw, 2rem);

  /* Element Sizing Tokens */
  --header-height: 80px;
  --topbar-height: 38px;
  --button-height-sm: 36px;
  --button-height-md: 46px;
  --button-height-lg: 54px;

  /* =========================================================================
     4. RADIUS, SHADOWS, ELEVATIONS & TRANSITIONS
     ========================================================================= */

  /* Border Radii — Sharp 0px Architectural Language (Design C style) */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-card: 0px;
  --radius-btn: 0px;
  --radius-full: 9999px; /* Reserved for small circular indicator dots */

  /* Refined, Minimalist Shadows (Avoiding generic heavy blur) */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.07), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.02);

  /* Transitions & Animation Timings */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus Indicator Ring */
  --focus-ring: 2px solid var(--color-brand-primary);
  --focus-ring-offset: 2px;
}