/**
 * EdyunayWorld Design System - Tokens
 * Brand Colors, Spacing, Typography, Shadows & Transitions
 */

:root {
  /* Brand Color Palette */
  --color-primary: #102A43;          /* Authority & Primary Navy */
  --color-primary-rgb: 16, 42, 67;
  --color-secondary: #173F5F;        /* Deep Navy */
  --color-secondary-rgb: 23, 63, 95;
  --color-accent: #F26B38;           /* Energetic Accent Orange */
  --color-accent-hover: #D95321;
  --color-accent-subtle: rgba(242, 107, 56, 0.12);
  --color-white: #FFFFFF;
  --color-bg-light: #EAF2F8;         /* Light Blue Background */
  --color-bg-alt: #F4F8FB;
  --color-bg-surface: #FFFFFF;
  --color-text-main: #243447;        /* High-contrast accessible text */
  --color-text-muted: #62748A;       /* Secondary descriptive text */
  --color-border: #DCE5ED;           /* Subtle elegant borders */
  --color-border-focus: #173F5F;
  --color-success: #198754;
  --color-error: #C0392B;
  --color-warning: #D97706;

  /* Typography */
  --font-family-base: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Responsive Fluid Font Sizes */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --font-size-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --font-size-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --font-size-2xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem);
  --font-size-3xl: clamp(2.25rem, 1.85rem + 2vw, 3.25rem);
  --font-size-hero: clamp(2.5rem, 2rem + 2.5vw, 4rem);

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

  /* Line Heights */
  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* Spacing Scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* Layout Widths */
  --container-max-width: 1240px;
  --container-narrow-width: 860px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --header-height: 80px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Elevation & Shadows */
  --shadow-subtle: 0 1px 3px rgba(16, 42, 67, 0.05), 0 1px 2px rgba(16, 42, 67, 0.03);
  --shadow-card: 0 4px 16px -2px rgba(16, 42, 67, 0.06), 0 2px 6px -1px rgba(16, 42, 67, 0.04);
  --shadow-hover: 0 16px 32px -4px rgba(16, 42, 67, 0.12), 0 6px 12px -2px rgba(16, 42, 67, 0.06);
  --shadow-nav: 0 4px 20px rgba(16, 42, 67, 0.08);
  --shadow-glow-accent: 0 4px 20px rgba(242, 107, 56, 0.28);

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 1000;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
}