/* ============================================================ MARSA ALEKHWA — Design Tokens Theme: "Midnight Opulence" ============================================================ */ @layer tokens { /* --- Interpolation tokens (gradient color space) --- */ :root { --in-oklab: ; --in-oklch: ; } @supports (background: linear-gradient(in oklab, white, black)) { :root { --in-oklab: in oklab; --in-oklch: in oklch; } } :root { /* ────────────────────────────────── TIER 1: Literal Color Tokens ────────────────────────────────── */ --color-navy-950: #070b16; --color-navy-900: #0d1b2a; --color-navy-850: #11222f; --color-navy-800: #1b2838; --color-navy-700: #1b3a5c; --color-navy-600: #1e4d7b; --color-navy-500: #2a6496; --color-gold-500: #b8941f; --color-gold-400: #d4af37; --color-gold-300: #e8c547; --color-gold-200: #f0d780; --color-gold-100: #f7e9b3; --color-cream-100: #f3efe6; --color-cream-50: #faf8f2; --color-gray-700: #3a4555; --color-gray-600: #566070; --color-gray-500: #6b7685; --color-gray-400: #8b95a5; --color-gray-300: #a8b0bd; --color-red-500: #e74c3c; --color-green-500: #27ae60; --color-blue-400: #3498db; /* ────────────────────────────────── TIER 2: Semantic Color Tokens ────────────────────────────────── */ --color-bg-primary: var(--color-navy-900); --color-bg-deep: var(--color-navy-950); --color-bg-surface: var(--color-navy-800); --color-bg-elevated: var(--color-navy-700); --color-bg-glass: rgba(13, 27, 42, 0.65); --color-bg-glass-heavy: rgba(13, 27, 42, 0.85); --color-accent: var(--color-gold-400); --color-accent-hover: var(--color-gold-300); --color-accent-soft: var(--color-gold-200); --color-accent-muted: var(--color-gold-100); --color-text-heading: var(--color-cream-50); --color-text-primary: var(--color-cream-100); --color-text-secondary: var(--color-gray-400); --color-text-muted: var(--color-gray-500); --color-text-accent: var(--color-gold-400); --color-border: rgba(212, 175, 55, 0.15); --color-border-strong: rgba(212, 175, 55, 0.35); --color-divider: rgba(255, 255, 255, 0.06); --color-success: var(--color-green-500); --color-error: var(--color-red-500); --color-info: var(--color-blue-400); /* ────────────────────────────────── TIER 3: UI / Component Tokens ────────────────────────────────── */ --surface-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); --surface-shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.5); --surface-shadow-glow: 0 0 40px rgba(212, 175, 55, 0.08); --card-bg: var(--color-bg-surface); --card-border: 1px solid var(--color-border); --card-radius: 1rem; --card-padding: 2rem; --btn-radius: 0.5rem; --btn-padding: 0.875rem 2rem; --btn-padding-lg: 1.125rem 2.75rem; --input-bg: var(--color-navy-850); --input-border: 1px solid var(--color-border); --input-radius: 0.5rem; --input-padding: 0.875rem 1.25rem; --navbar-height: 4.5rem; --navbar-blur: 16px; /* ────────────────────────────────── TYPOGRAPHY ────────────────────────────────── */ --font-heading: 'Cinzel', 'Amiri', Georgia, serif; --font-body: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; --font-arabic: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; --font-arabic-heading: 'Amiri', 'Cinzel', Georgia, serif; --font-mono: 'DM Mono', 'Fira Code', monospace; /* Fluid type scale using clamp() */ --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem); --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem); --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem); --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); --text-xl: clamp(1.15rem, 1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.4rem, 1.1rem + 1.5vw, 2rem); --text-3xl: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem); --text-4xl: clamp(2rem, 1.25rem + 3.75vw, 3.5rem); --text-5xl: clamp(2.5rem, 1.5rem + 5vw, 4.5rem); --text-hero: clamp(2.75rem, 1.5rem + 6.25vw, 5.5rem); /* ────────────────────────────────── SPACING (8px grid) ────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --section-padding-block: clamp(4rem, 3rem + 5vw, 8rem); --container-max: 80rem; /* 1280px */ --container-padding: clamp(1.25rem, 1rem + 2vw, 3rem); /* ────────────────────────────────── TRANSITIONS ────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; --transition-color: color var(--duration-base) var(--ease-out); --transition-bg: background-color var(--duration-base) var(--ease-out); --transition-transform: transform var(--duration-base) var(--ease-out); --transition-shadow: box-shadow var(--duration-base) var(--ease-out); --transition-opacity: opacity var(--duration-base) var(--ease-out); --transition-all: all var(--duration-base) var(--ease-out); /* ────────────────────────────────── Z-INDEX SCALE ────────────────────────────────── */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ────────────────────────────────── GRADIENTS ────────────────────────────────── */ --gradient-hero: linear-gradient( to bottom var(--in-oklab), var(--color-navy-950) 0%, var(--color-navy-900) 40%, var(--color-navy-800) 100% ); --gradient-gold: linear-gradient( 135deg var(--in-oklch), var(--color-gold-500) 0%, var(--color-gold-400) 40%, var(--color-gold-300) 100% ); --gradient-gold-text: linear-gradient( 90deg var(--in-oklch), var(--color-gold-400), var(--color-gold-200), var(--color-gold-400) ); --gradient-surface: linear-gradient( 180deg var(--in-oklab), var(--color-navy-800), var(--color-navy-850) ); --gradient-radial-glow: radial-gradient( ellipse at center, rgba(212, 175, 55, 0.06) 0%, transparent 70% ); } }