/* ============================================================
   IDEX × TOPRAK — Design Tokens
   Source: Brand Identity Manual v2.0
   ============================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* IDEX Corporate Palette */
    --charcoal: #1A1A2E;
    --teal: #0891B2;
    --teal-lt: #0AA8D4;
    --void: #0F0F1A;
    --mist: #E2E8F0;

    /* TOPRAK Product Palette */
    --orange: #D35F28;
    --orange-lt: #E07540;
    --graphite: #1A1A1A;
    --steel: #71767B;
    --cream: #F5F0E8;

    /* Surfaces */
    --paper: #FAFAF7;
    --white: #FFFFFF;
    --dark-2: #111118;
    --dark-3: #1A1A24;

    /* Text */
    --txt: #1A1A1A;
    --txt-secondary: #71767B;
    --txt-tertiary: #A0A4A8;

    /* Borders & Glass */
    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(0, 0, 0, 0.06);
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: 20px;

    /* Radii */
    --radius: 16px;
    --radius-lg: 24px;
    --radius-sm: 8px;

    /* Easing */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Typography
   ============================================================ */

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--txt);
    line-height: 1.7;
    font-weight: 400;
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic: Cairo for everything */
html[lang="ar"] body,
html[dir="rtl"] body {
    font-family: 'Cairo', sans-serif;
}

/* Display headings */
.display {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
}

html[dir="rtl"] .display {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    letter-spacing: 0;
}

/* Section headings */
h1, .h1 {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h3, .h3 {
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 600;
    line-height: 1.3;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
    letter-spacing: 0;
}

/* Section label */
.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--txt-secondary);
}

html[dir="rtl"] .section-label {
    letter-spacing: 0;
    font-size: 13px;
}

/* Body text sizes */
.text-lg { font-size: 18px; line-height: 1.8; }
.text-md { font-size: 16px; line-height: 1.7; }
.text-sm { font-size: 14px; line-height: 1.6; }
.text-xs { font-size: 12px; line-height: 1.5; }

/* Colors */
.text-teal { color: var(--teal); }
.text-orange { color: var(--orange); }
.text-steel { color: var(--steel); }
.text-muted { color: var(--txt-secondary); }
.text-white { color: #fff; }

/* ============================================================
   Links
   ============================================================ */
a {
    color: var(--teal);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

a:hover {
    color: var(--teal-lt);
}