/**
 * variables.css — Design Tokens & Thematic Variables
 * British-German-Deutsch inspired aesthetic discipline with contextual Nigerian resonance.
 */

:root {
  /* Typography Stack — British Editorial Precision */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Consolas", "Liberation Mono", Menlo, Courier, monospace;

  /* Typographic Scale with Fluid Clamp (Upgraded for Maximum Readability & Elite Legibility) */
  --font-size-xs: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem);
  --font-size-sm: clamp(0.95rem, 0.9rem + 0.25vw, 1.025rem);
  --font-size-base: clamp(1.025rem, 0.975rem + 0.25vw, 1.1rem);
  --font-size-md: clamp(1.15rem, 1.08rem + 0.35vw, 1.25rem);
  --font-size-lg: clamp(1.25rem, 1.18rem + 0.4vw, 1.375rem);
  --font-size-xl: clamp(1.45rem, 1.35rem + 0.5vw, 1.625rem);
  --font-size-2xl: clamp(1.75rem, 1.55rem + 0.9vw, 2rem);
  --font-size-3xl: clamp(2.125rem, 1.85rem + 1.2vw, 2.5rem);
  --font-size-4xl: clamp(2.5rem, 2.15rem + 1.6vw, 2.875rem);

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

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* Letter Spacing Tokens — Editorial Precision */
  --letter-spacing-tight: -0.03em;
  --letter-spacing-tighter: -0.035em;
  --letter-spacing-body: 0.005em;
  --letter-spacing-caps: 0.08em;

  /* Elite British Editorial Neutral Palette (Savile Row Restraint with Organic Warmth) */
  --color-bg: #fafaf8;                 /* Cooled Parchment Canvas — Slightly Crisper */
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-subtle: #f5f4f0;      /* Velvety Natural Warm Neutral */
  --color-surface-highlight: #faf9f6;
  --color-surface-hover: rgba(15, 23, 42, 0.04); /* Interactive Surface State */
  
  --color-border: #e5e3dd;              /* Cooled Organic Border */
  --color-border-subtle: #efeee9;
  --color-border-hover: #c8c5bb;
  --color-divider: rgba(231, 229, 223, 0.45); /* Ultra-subtle Section Dividers */

  --color-text-primary: #0f141c;        /* Velvet Midnight Onyx */
  --color-text-secondary: #374151;      /* Refined Graphite Slate */
  --color-text-muted: #64748b;          /* Balanced Editorial Charcoal */
  --color-text-inverse: #ffffff;

  /* Architectural Restrained Primary (Executive Midnight) */
  --color-primary: #0f172a;             /* Executive Midnight Obsidian */
  --color-primary-hover: #020617;
  --color-primary-subtle: #f8fafc;
  --color-primary-border: #334155;

  /* Radiant Warm Nigerian Sun Amber & Terracotta Brand Accent */
  --color-accent: #ea580c;             /* Rich Warm Persimmon / Sun Amber */
  --color-accent-hover: #c2410c;       /* Deep Burnished Terracotta */
  --color-accent-active: #9a3412;
  --color-accent-subtle: #fff7ed;       /* Warm Honeycomb Wash */
  --color-accent-muted: #ffedd5;
  --color-accent-border: #fed7aa;
  --color-accent-text: #9a3412;         /* High-Contrast Burnt Amber (WCAG AAA) */
  --color-accent-glow: rgba(234, 88, 12, 0.22);

  /* Semantic Feedback Hierarchy */
  --color-success: #047857;             /* Deep Forest Emerald */
  --color-success-hover: #065f46;
  --color-success-bg: #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-success-text: #065f46;

  --color-info: #0284c7;                /* Royal Ocean Azure */
  --color-info-hover: #0369a1;
  --color-info-bg: #f0f9ff;
  --color-info-border: #bae6fd;
  --color-info-text: #0369a1;

  --color-warning: #d97706;             /* Heritage Warm Honey */
  --color-warning-hover: #b45309;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text: #92400e;

  --color-error: #dc2626;               /* Rich Carmine Red */
  --color-error-hover: #b91c1c;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  --color-error-text: #991b1b;

  /* Semantic Tier Indicators */
  --color-tier-beginner-bg: #ecfdf5;
  --color-tier-beginner-border: #a7f3d0;
  --color-tier-beginner-text: #047857;

  --color-tier-intermediate-bg: #fff7ed;
  --color-tier-intermediate-border: #fed7aa;
  --color-tier-intermediate-text: #c2410c;

  --color-tier-advanced-bg: #f8fafc;
  --color-tier-advanced-border: #cbd5e1;
  --color-tier-advanced-text: #0f172a;

  /* Semantic Work Mode Indicators */
  --color-mode-remote-bg: #f0fdfa;
  --color-mode-remote-border: #99f6e4;
  --color-mode-remote-text: #0f766e;

  --color-mode-hybrid-bg: #fff7ed;
  --color-mode-hybrid-border: #fed7aa;
  --color-mode-hybrid-text: #c2410c;

  --color-mode-onsite-bg: #f1f5f9;
  --color-mode-onsite-border: #cbd5e1;
  --color-mode-onsite-text: #334155;

  /* Rich Semantic Gradients */
  --gradient-brand: linear-gradient(135deg, #f97316 0%, #ea580c 55%, #c2410c 100%);
  --gradient-brand-subtle: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(234, 88, 12, 0.04) 100%);
  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 251, 249, 0.95) 100%);

  /* Layout Dimensions & Spacing */
  --header-height: 4.25rem;
  --subnav-height: 3.125rem;
  --combined-header-height: calc(var(--header-height) + var(--subnav-height));
  --container-max-width: 1200px;
  --container-narrow-width: 840px;
  --drawer-width: min(340px, 85vw);

  --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;

  /* Geometric Radii — Sharper British Precision */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Subtle Shadows & Elevation — Restrained, Close-to-Surface */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 3px 8px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 8px 20px -4px rgba(15, 23, 42, 0.07), 0 4px 6px -4px rgba(15, 23, 42, 0.02);
  --shadow-focus: 0 0 0 2px rgba(234, 88, 12, 0.24);

  /* Transitions & Micro-Interactions — Silk-Smooth */
  --transition-fast: 140ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-base: 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow: 360ms cubic-bezier(0.25, 0.1, 0.25, 1);

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