/* ==========================================================================
   NASJ Design System - Variables & Tokens
   ========================================================================== */

:root {
  /* Brand Color Palette */
  --color-linen: #F7F6F2;
  --color-linen-alt: #EFECE5;
  --color-white: #FFFFFF;
  
  --color-pine: #2F443B;
  --color-pine-hover: #243730;
  --color-pine-active: #1B2B25;
  --color-pine-light: rgba(47, 68, 59, 0.08);
  --color-pine-translucent: rgba(47, 68, 59, 0.16);

  --color-ink: #302C29;
  --color-ink-light: #5A5551;
  --color-ink-muted: #7A7470;

  --color-clay: #DCCBC5;
  --color-clay-light: #F2EAE6;
  --color-clay-dark: #BFA79E;

  --color-stone: #DDDCD5;
  --color-stone-light: #EBEAE5;
  --color-stone-dark: #C2C0B8;

  --color-brass: #9B7952;
  --color-brass-hover: #826442;
  --color-brass-light: rgba(155, 121, 82, 0.12);

  /* Functional Status Colors */
  --color-success: #2A6A4E;
  --color-success-bg: #E8F3ED;
  --color-warning: #8B5927;
  --color-warning-bg: #FAF0E4;
  --color-error: #A13426;
  --color-error-bg: #FBECE9;

  /* Typography */
  --font-heading: 'Alexandria', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --type-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --type-sm: clamp(0.84375rem, 0.8rem + 0.2vw, 0.90625rem);
  --type-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --type-md: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --type-lg: clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);
  --type-xl: clamp(1.5rem, 1.35rem + 0.85vw, 1.875rem);
  --type-2xl: clamp(1.875rem, 1.65rem + 1.2vw, 2.375rem);
  --type-3xl: clamp(2.25rem, 1.95rem + 1.8vw, 3.125rem);
  --type-hero: clamp(2.625rem, 2.2rem + 2.4vw, 3.875rem);

  /* 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 Containers */
  --container-max: 1280px;
  --container-narrow: 840px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Border Radii (Intentional, subtle craft aesthetic) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* Shadows (Refined, no heavy generic black blobs) */
  --shadow-subtle: 0 1px 3px rgba(48, 44, 41, 0.05);
  --shadow-card: 0 4px 16px rgba(48, 44, 41, 0.06);
  --shadow-hover: 0 10px 28px rgba(48, 44, 41, 0.1);
  --shadow-modal: 0 20px 48px rgba(48, 44, 41, 0.18);

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-indices */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}