/* 
  Custom Design System
  Lightweight, no build step, pure CSS.
*/

:root {
    /* Colors */
    --color-background: #FFFFFF;
    --color-offset: #F9FAFB;
    --color-action: #007AFF;
    --color-text: #111827;
    --color-text-muted: rgba(17, 24, 39, 0.6);
    --color-white: #FFFFFF;
    --color-border: #F3F4F6;
    
    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Montserrat', sans-serif;
    --font-arabic: 'IBM Plex Sans Arabic', sans-serif;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-48: 12rem;
    
    /* Layout */
    --container-max-width: 1280px;
    --container-padding: 2rem;
    --border-radius: 0.75rem;
    --border-radius-lg: 1.5rem;
    --border-radius-xl: 2.5rem;
    --border-radius-full: 9999px;
    --transition: all 0.3s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Base Reset */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; }
html:focus-within { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}
a:not([class]) { text-decoration-skip-ink: auto; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }

/* Layout Components */
.container {
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.section-padding { padding-block: var(--space-24); }
.section-padding-lg { padding-block: var(--space-32); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.gap-4 { gap: var(--space-4); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-8); }

@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Typography Classes */
.font-montserrat { font-family: var(--font-serif); }
.font-arabic { font-family: var(--font-arabic); }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.text-action { color: var(--color-action); }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* Interactive Elements */
.btn {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    border-radius: var(--border-radius-full);
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--color-text);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-action);
    box-shadow: 0 10px 15px -3px rgba(0, 122, 255, 0.2);
}

.btn-offset {
    background-color: var(--color-offset);
    color: var(--color-text);
}

.btn-offset:hover {
    background-color: var(--color-white);
    box-shadow: var(--shadow-xl);
}

/* Specific Component Styles */
.nav {
    position: fixed;
    width: 100%;
    z-index: 50;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.card {
    background: var(--color-white);
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--color-border);
    transition: var(--transition);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-8px);
}

.footer {
    background: var(--color-offset);
    padding-block: var(--space-20);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-20);
}

/* Utilities */
.bg-white { background-color: var(--color-white); }
.bg-offset { background-color: var(--color-offset); }
.rounded-lg { border-radius: var(--border-radius); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.aspect-square { aspect-ratio: 1/1; }
.aspect-video { aspect-ratio: 16/9; }
.object-cover { object-fit: cover; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.overflow-hidden { overflow: hidden; }
.hidden { display: none; }

@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* RTL Support */
[dir="rtl"] .font-sans { font-family: var(--font-arabic); }
[dir="rtl"] .space-x-8 > * + * { margin-right: var(--space-8); margin-left: 0; }