/**
 * Alpha Delving — Lumina Light System Design Tokens
 * Source: DESIGN.md
 * Token 1: Project Scaffold + Design Tokens
 */

:root {
  /* ==========================================================================
     1. COLOR TOKENS
     ========================================================================== */

  /* Surface & Canvas Tokens */
  --color-surface: #f8f9ff;
  --color-surface-dim: #cbdbf5;
  --color-surface-bright: #f8f9ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eff4ff;
  --color-surface-container: #e5eeff;
  --color-surface-container-high: #dce9ff;
  --color-surface-container-highest: #d3e4fe;
  --color-surface-variant: #d3e4fe;
  --color-surface-pure: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-surface-muted: #f1f5f9;

  /* On-Surface / Contrast Typography */
  --color-on-surface: #0b1c30;
  --color-on-surface-variant: #3e4851;
  --color-inverse-surface: #213145;
  --color-inverse-on-surface: #eaf1ff;

  /* Background Tokens */
  --color-background: #f8f9ff;
  --color-on-background: #0b1c30;

  /* Outlines & Borders */
  --color-outline: #6f7882;
  --color-outline-variant: #bec8d2;
  --color-border-subtle: rgba(15, 23, 42, 0.08);
  --color-border-hover: rgba(0, 160, 233, 0.35);
  --color-border-focus: #00a0e9;

  /* Primary Brand Palette (Electric Cyan & Deep Brand) */
  --color-primary: #006494;
  --color-on-primary: #ffffff;
  --color-primary-container: #00a0e9;
  --color-on-primary-container: #00334e;
  --color-inverse-primary: #8ecdff;
  --color-surface-tint: #006494;

  --color-primary-fixed: #cae6ff;
  --color-primary-fixed-dim: #8ecdff;
  --color-on-primary-fixed: #001e30;
  --color-on-primary-fixed-variant: #004b70;

  /* Secondary Brand Palette (Midnight Slate & Accents) */
  --color-secondary: #565e74;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #dae2fd;
  --color-on-secondary-container: #5c647a;

  --color-secondary-fixed: #dae2fd;
  --color-secondary-fixed-dim: #bec6e0;
  --color-on-secondary-fixed: #131b2e;
  --color-on-secondary-fixed-variant: #3f465c;

  /* Tertiary Brand Palette (Sky Blue Accent) */
  --color-tertiary: #006398;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #3b9ee3;
  --color-on-tertiary-container: #003250;

  --color-tertiary-fixed: #cce5ff;
  --color-tertiary-fixed-dim: #93ccff;
  --color-on-tertiary-fixed: #001d31;
  --color-on-tertiary-fixed-variant: #004b73;

  /* Functional Status & Error */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Distinctive Lumina Functional Brand Tokens */
  --color-brand-cyan: #00a0e9;          /* Electric Cyan CTA & Glow */
  --color-brand-cyan-hover: #0284c7;    /* Primary CTA Hover State */
  --color-brand-navy: #0f172a;          /* Deep Midnight Slate - Headings & High Contrast */
  --color-brand-sky: #0284c7;           /* Sky Blue Link & Secondary Accent */
  --color-brand-neutral: #64748b;       /* Neutral Body Copy & Dividers */
  --color-navy-deep: #0b101d;
  --color-navy-slate: #1e293b;

  /* Accents, Badges & Glows */
  --color-accent-glow: rgba(0, 160, 233, 0.15);
  --color-badge-cyan-bg: #e0f2fe;
  --color-badge-cyan-text: #0369a1;

  /* ==========================================================================
     2. TYPOGRAPHY TOKENS
     ========================================================================== */

  /* Font Families */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Display Hero (Desktop & Mobile) */
  --type-display-hero-font-family: var(--font-display);
  --type-display-hero-size: 56px;
  --type-display-hero-weight: 800;
  --type-display-hero-line-height: 64px;
  --type-display-hero-letter-spacing: -0.03em;

  /* Fluid Typography Tokens (Self-scaling with clamp across 360px -> 1280px) */
  --type-display-hero-fluid: clamp(2.125rem, 1.6rem + 2.5vw, 3.5rem);
  --type-headline-xl-fluid: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --type-headline-lg-fluid: clamp(1.375rem, 1.15rem + 1.2vw, 2rem);
  --type-headline-md-fluid: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --type-headline-sm-fluid: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);

  --type-display-hero-mobile-font-family: var(--font-display);
  --type-display-hero-mobile-size: 38px;
  --type-display-hero-mobile-weight: 800;
  --type-display-hero-mobile-line-height: 46px;
  --type-display-hero-mobile-letter-spacing: -0.02em;

  /* Headline XL */
  --type-headline-xl-font-family: var(--font-display);
  --type-headline-xl-size: 44px;
  --type-headline-xl-weight: 700;
  --type-headline-xl-line-height: 52px;
  --type-headline-xl-letter-spacing: -0.025em;

  --type-headline-xl-mobile-font-family: var(--font-display);
  --type-headline-xl-mobile-size: 30px;
  --type-headline-xl-mobile-weight: 700;
  --type-headline-xl-mobile-line-height: 38px;
  --type-headline-xl-mobile-letter-spacing: -0.02em;

  /* Headline LG */
  --type-headline-lg-font-family: var(--font-display);
  --type-headline-lg-size: 32px;
  --type-headline-lg-weight: 700;
  --type-headline-lg-line-height: 40px;
  --type-headline-lg-letter-spacing: -0.02em;

  --type-headline-lg-mobile-font-family: var(--font-display);
  --type-headline-lg-mobile-size: 24px;
  --type-headline-lg-mobile-weight: 700;
  --type-headline-lg-mobile-line-height: 32px;
  --type-headline-lg-mobile-letter-spacing: -0.015em;

  /* Headline MD */
  --type-headline-md-font-family: var(--font-display);
  --type-headline-md-size: 22px;
  --type-headline-md-weight: 600;
  --type-headline-md-line-height: 30px;
  --type-headline-md-letter-spacing: -0.01em;

  /* Headline SM */
  --type-headline-sm-font-family: var(--font-display);
  --type-headline-sm-size: 18px;
  --type-headline-sm-weight: 600;
  --type-headline-sm-line-height: 26px;
  --type-headline-sm-letter-spacing: -0.005em;

  /* Body Text */
  --type-body-lg-font-family: var(--font-body);
  --type-body-lg-size: 18px;
  --type-body-lg-weight: 400;
  --type-body-lg-line-height: 28px;

  --type-body-md-font-family: var(--font-body);
  --type-body-md-size: 15px;
  --type-body-md-weight: 400;
  --type-body-md-line-height: 24px;

  --type-body-sm-font-family: var(--font-body);
  --type-body-sm-size: 13px;
  --type-body-sm-weight: 400;
  --type-body-sm-line-height: 20px;

  /* Labels & Overlines */
  --type-label-md-font-family: var(--font-display);
  --type-label-md-size: 14px;
  --type-label-md-weight: 600;
  --type-label-md-line-height: 20px;
  --type-label-md-letter-spacing: 0.01em;

  --type-label-sm-font-family: var(--font-display);
  --type-label-sm-size: 12px;
  --type-label-sm-weight: 600;
  --type-label-sm-line-height: 16px;
  --type-label-sm-letter-spacing: 0.03em;

  /* Caption */
  --type-caption-font-family: var(--font-body);
  --type-caption-size: 11px;
  --type-caption-weight: 500;
  --type-caption-line-height: 14px;
  --type-caption-letter-spacing: 0.04em;

  /* ==========================================================================
     3. SHAPES & BORDER RADIUS TOKENS
     ========================================================================== */

  --radius-sm: 0.25rem;       /* 4px - Inputs, badges, tight tags */
  --radius-default: 0.5rem;   /* 8px - Buttons, form controls */
  --radius-md: 0.75rem;       /* 12px - Icon containers */
  --radius-lg: 1rem;          /* 16px - Standard cards & blocks */
  --radius-xl: 1.5rem;        /* 24px - Large feature modules & modals */
  --radius-full: 9999px;      /* Fully rounded pills & circular buttons */

  /* ==========================================================================
     4. SPACING & GRID TOKENS
     ========================================================================== */

  --spacing-gutter: 1.5rem;
  --spacing-gutter-mobile: 1rem;
  --spacing-margin: 2rem;
  --spacing-margin-mobile: 1.25rem;
  --spacing-margin-desktop-max: 5rem;
  --container-max-width: 1280px;

  /* Scale Steps */
  --space-xs: 0.25rem;        /* 4px */
  --space-sm: 0.5rem;         /* 8px */
  --space-md: 1rem;           /* 16px */
  --space-lg: 1.5rem;         /* 24px */
  --space-xl: 2.5rem;         /* 40px */
  --space-2xl: 4rem;          /* 64px */
  --space-3xl: 6rem;          /* 96px */

  /* Responsive Section Vertical Padding */
  --section-py-desktop: 6rem;
  --section-py-tablet: 4.5rem;
  --section-py-mobile: 3.25rem;

  /* Responsive Card Internal Padding Tokens */
  --card-padding-desktop: 2.25rem 2rem;
  --card-padding-tablet: 1.75rem 1.5rem;
  --card-padding-mobile: 1.25rem 1rem;
  --card-padding-compact: 1rem 0.875rem;

  /* ==========================================================================
     5. ELEVATION, SHADOWS & BLUR TOKENS
     ========================================================================== */

  /* Resting Card Shadow */
  --shadow-resting: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px -4px rgba(15, 23, 42, 0.05);

  /* Hover Elevated Shadow with Cyan Ambience */
  --shadow-hover: 0 16px 32px -8px rgba(0, 160, 233, 0.12), 0 4px 12px rgba(15, 23, 42, 0.03);

  /* Primary Button Elevation */
  --shadow-primary-btn: 0 8px 20px -4px rgba(0, 160, 233, 0.4);

  /* Inner Outline Glow */
  --shadow-glow-border: 0 0 0 1px rgba(0, 160, 233, 0.2);

  /* Form Focus Ring */
  --shadow-focus-ring: 0 0 0 3px rgba(0, 160, 233, 0.15);

  /* Frosted Glass Floating Navbar / Overlay */
  --backdrop-blur-nav: blur(16px);
  --bg-translucent-nav: rgba(255, 255, 255, 0.85);
  --border-translucent-nav: 1px solid rgba(15, 23, 42, 0.06);

  /* ==========================================================================
     6. MOTION & TRANSITION TOKENS
     ========================================================================== */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}