/**
 * El Attareen Group - Design System Tokens
 * The House of El Attareen - Materiality, Tone, and Spatial Proportions
 */

:root {
  /* Color Palette - Obsidian, Graphite, Limestone, Soft Ivory, Mineral Accents */
  --color-obsidian-950: #060708;
  --color-obsidian-900: #0a0b0d;
  --color-obsidian-850: #101216;
  --color-obsidian-800: #16181e;
  --color-obsidian-700: #20242c;
  --color-obsidian-600: #2d323c;

  --color-graphite-500: #424956;
  --color-graphite-400: #5d6676;
  --color-graphite-300: #818c9e;
  --color-graphite-200: #a7b1c1;
  --color-graphite-100: #d0d7e2;

  --color-limestone-100: #faf8f5;
  --color-limestone-200: #f4efe6;
  --color-limestone-300: #ebe3d5;
  --color-limestone-400: #ded3c0;
  --color-limestone-500: #c9baa1;
  --color-limestone-900: #2c2720;

  --color-ivory: #faf9f6;
  --color-pure-white: #ffffff;
  --color-pure-black: #000000;

  /* Mineral Warm Bronze Accent (Subtle, architectural, never cheap gold) */
  --color-bronze-300: #dfba8e;
  --color-bronze-400: #c49a6c;
  --color-bronze-500: #a67f53;
  --color-bronze-600: #88653e;
  --color-bronze-glow: rgba(196, 154, 108, 0.12);

  /* Semantic Surfaces */
  --surface-ground: var(--color-obsidian-950);
  --surface-primary: var(--color-obsidian-900);
  --surface-elevated: var(--color-obsidian-850);
  --surface-card: var(--color-obsidian-800);
  --surface-card-hover: var(--color-obsidian-700);
  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-border-subtle: rgba(255, 255, 255, 0.04);
  --surface-border-accent: rgba(196, 154, 108, 0.35);

  /* Semantic Light Surfaces (Mid Page Moment & Ivory Notes) */
  --surface-light-ground: var(--color-limestone-200);
  --surface-light-card: var(--color-limestone-100);
  --surface-light-border: rgba(44, 39, 32, 0.1);
  --text-light-primary: var(--color-limestone-900);
  --text-light-secondary: #5c5549;
  --text-light-muted: #887d6d;

  /* Semantic Typography Colors */
  --text-primary: #f2f4f8;
  --text-secondary: #a9b2c0;
  --text-muted: #6b7585;
  --text-accent: var(--color-bronze-400);
  --text-inverse: var(--color-obsidian-950);

  /* Sector Specific Accent Signatures */
  --sector-engineering-accent: #8e9bb0;
  --sector-engineering-surface: #111419;
  --sector-industrial-accent: #a38a6d;
  --sector-industrial-surface: #111317;
  --sector-creative-accent: #c49a6c;
  --sector-creative-surface: #141210;
  --sector-ventures-accent: #9a9eab;
  --sector-ventures-surface: #121418;

  /* Typography Systems - The Godfather & Monolithic Dynastic Style */
  --font-arabic: 'Alexandria', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic-heading: 'Alexandria', 'Cairo', sans-serif;
  --font-latin: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-latin-heading: 'Cinzel', 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-latin-serif: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-latin-display: 'Cinzel', 'Cinzel Decorative', 'Playfair Display', serif;

  /* Font Sizes - Proportionate, Architectural, Scalable */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.8438rem, 0.8rem + 0.25vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.35rem + 0.9vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.65rem + 1.3vw, 2.375rem);
  --text-3xl: clamp(2.25rem, 1.95rem + 1.8vw, 3rem);
  --text-4xl: clamp(2.75rem, 2.35rem + 2.4vw, 3.875rem);
  --text-display: clamp(3.25rem, 2.75rem + 3.2vw, 4.75rem);

  /* Spacing Scale */
  --space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
  --space-sm: clamp(0.75rem, 0.7rem + 0.3vw, 1rem);
  --space-md: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
  --space-lg: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem);
  --space-xl: clamp(2.75rem, 2.3rem + 1.5vw, 3.75rem);
  --space-2xl: clamp(3.75rem, 3rem + 2.4vw, 5.5rem);
  --space-3xl: clamp(5rem, 4rem + 3.5vw, 7.5rem);
  --space-section: clamp(4.5rem, 3.5rem + 3.5vw, 8rem);

  /* Layout Dimensions */
  --container-max: 1380px;
  --container-narrow: 980px;
  --container-wide: 1600px;
  --header-height: 96px;
  --header-height-mobile: 76px;

  /* Architectural Radii (Subtle, never bubbly) */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 9999px;

  /* Elevation Shadows */
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 10px 35px rgba(0, 0, 0, 0.45);
  --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.65);
  --shadow-portal: 0 0 120px rgba(0, 0, 0, 0.9);

  /* Transitions and Motion Curves */
  --ease-architectural: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-portal: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 200ms;
  --duration-normal: 350ms;
  --duration-deliberate: 650ms;
  --duration-portal: 1200ms;

  /* Z-Index Hierarchy */
  --z-negative: -1;
  --z-ground: 0;
  --z-content: 10;
  --z-elevated: 20;
  --z-portal-layer: 30;
  --z-sticky: 100;
  --z-header: 500;
  --z-drawer: 800;
  --z-modal: 1000;
  --z-skip-link: 2000;
}