:root {
    color-scheme: light;
    --brand-color: #df0a0a;
    --brand-strong: color-mix(in srgb, var(--brand-color) 78%, black);
    --brand-soft: color-mix(in srgb, var(--brand-color) 22%, white);
    --brand-faint: color-mix(in srgb, var(--brand-color) 10%, white);
    --brand-veil: color-mix(in srgb, var(--brand-color) 16%, transparent);
    --brand-rim: color-mix(in srgb, var(--brand-color) 30%, transparent);
    --brand-shadow: color-mix(in srgb, var(--brand-color) 28%, transparent);

    --neutral-0: #ffffff;
    --neutral-25: #fcfaf7;
    --neutral-50: #f7f2ea;
    --neutral-100: #efe8dd;
    --neutral-200: #dfd5c6;
    --neutral-300: #c7b8a5;
    --neutral-400: #a29280;
    --neutral-500: #75685b;
    --neutral-700: #2e261f;
    --neutral-800: #221b16;
    --neutral-900: #17120f;

    --surface-page: linear-gradient(180deg, var(--neutral-25) 0%, var(--neutral-50) 45%, color-mix(in srgb, var(--brand-color) 5%, var(--neutral-100)) 100%);
    --surface-panel: color-mix(in srgb, var(--neutral-0) 90%, var(--neutral-25));
    --surface-panel-strong: color-mix(in srgb, var(--neutral-0) 97%, var(--brand-faint));
    --surface-panel-muted: color-mix(in srgb, var(--neutral-0) 72%, var(--neutral-100));
    --surface-panel-inset: color-mix(in srgb, var(--neutral-100) 56%, var(--neutral-0));
    --surface-dark: linear-gradient(180deg, color-mix(in srgb, var(--neutral-900) 92%, var(--brand-color) 8%), color-mix(in srgb, var(--neutral-800) 96%, var(--brand-color) 4%));
    --surface-dark-soft: color-mix(in srgb, var(--neutral-900) 78%, var(--brand-color) 22%);

    --text-strong: var(--neutral-900);
    --text-base: color-mix(in srgb, var(--neutral-900) 92%, var(--neutral-700));
    --text-soft: color-mix(in srgb, var(--neutral-700) 74%, var(--neutral-400));
    --text-faint: color-mix(in srgb, var(--neutral-500) 82%, var(--neutral-300));
    --text-on-dark: color-mix(in srgb, var(--neutral-0) 90%, var(--neutral-100));
    --text-on-dark-soft: color-mix(in srgb, var(--neutral-0) 70%, var(--neutral-200));

    --line-soft: color-mix(in srgb, var(--neutral-900) 10%, transparent);
    --line-strong: color-mix(in srgb, var(--neutral-900) 16%, transparent);
    --line-brand: color-mix(in srgb, var(--brand-color) 24%, transparent);
    --line-dark: color-mix(in srgb, var(--neutral-0) 12%, transparent);

    --shadow-xs: 0 1px 0 color-mix(in srgb, var(--neutral-0) 82%, transparent);
    --shadow-sm: 0 12px 30px color-mix(in srgb, var(--neutral-900) 7%, transparent);
    --shadow-md: 0 22px 54px color-mix(in srgb, var(--neutral-900) 11%, transparent);
    --shadow-lg: 0 34px 90px color-mix(in srgb, var(--neutral-900) 15%, transparent);
    --shadow-brand: 0 24px 60px var(--brand-shadow);

    --status-pending: #b97b1d;
    --status-confirmed: #1b8f68;
    --status-preparing: #d25d16;
    --status-out-for-delivery: #4464d9;
    --status-completed: #15803d;
    --status-cancelled: #c23c3c;
    --status-paid: #15803d;
    --status-unpaid: #b45309;

    --status-pending-surface: color-mix(in srgb, var(--status-pending) 12%, var(--neutral-0));
    --status-confirmed-surface: color-mix(in srgb, var(--status-confirmed) 12%, var(--neutral-0));
    --status-preparing-surface: color-mix(in srgb, var(--status-preparing) 12%, var(--neutral-0));
    --status-out-for-delivery-surface: color-mix(in srgb, var(--status-out-for-delivery) 12%, var(--neutral-0));
    --status-completed-surface: color-mix(in srgb, var(--status-completed) 12%, var(--neutral-0));
    --status-cancelled-surface: color-mix(in srgb, var(--status-cancelled) 12%, var(--neutral-0));

    --success: #15803d;
    --success-surface: color-mix(in srgb, var(--success) 12%, var(--neutral-0));
    --warning: #b45309;
    --warning-surface: color-mix(in srgb, var(--warning) 12%, var(--neutral-0));
    --danger: #c23c3c;
    --danger-surface: color-mix(in srgb, var(--danger) 12%, var(--neutral-0));

    --radius-xs: 0.75rem;
    --radius-sm: 1rem;
    --radius-md: 1.25rem;
    --radius-lg: 1.75rem;
    --radius-xl: 2.25rem;
    --radius-pill: 999px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --font-body-latin: "Manrope", "Segoe UI", sans-serif;
    --font-body-ar: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
    --font-display-latin: "Fraunces", Georgia, serif;
    --font-display-ar: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
    --font-body: var(--font-body-latin);
    --font-display: var(--font-display-latin);

    --text-xs: 0.78rem;
    --text-sm: 0.9rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.35rem;
    --text-2xl: clamp(1.7rem, 3vw, 2.3rem);
    --text-3xl: clamp(2.3rem, 5vw, 4.2rem);
    --leading-tight: 1.08;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;

    --content-width: min(1240px, calc(100vw - 2rem));
    --panel-width: min(1360px, calc(100vw - 2rem));
    --header-offset: 6rem;
    --hero-glow:
        radial-gradient(circle at top left, color-mix(in srgb, var(--brand-color) 16%, transparent), transparent 42%),
        radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--neutral-900) 7%, transparent), transparent 24%);
}

[dir="rtl"] {
    --font-body: var(--font-body-ar);
    --font-display: var(--font-display-ar);
}

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

html {
    background: var(--surface-page);
    color: var(--text-base);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--text-base);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

::selection {
    background: var(--brand-veil);
    color: var(--text-strong);
}

.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --neutral-0: #17130f;
        --neutral-25: #1d1814;
        --neutral-50: #241e18;
        --neutral-100: #2f2822;
        --neutral-200: #40362d;
        --neutral-300: #5f5246;
        --neutral-400: #8c7b6c;
        --neutral-500: #b3a594;
        --neutral-700: #e5dbcf;
        --neutral-800: #f3ece2;
        --neutral-900: #fff9f2;

        --surface-page: linear-gradient(180deg, #140f0c 0%, #1b1511 45%, color-mix(in srgb, var(--brand-color) 14%, #211914) 100%);
        --surface-panel: color-mix(in srgb, #251d18 90%, var(--brand-color) 10%);
        --surface-panel-strong: color-mix(in srgb, #2a211b 92%, var(--brand-color) 8%);
        --surface-panel-muted: color-mix(in srgb, #1f1814 90%, var(--neutral-100));
        --surface-panel-inset: color-mix(in srgb, #1a1411 88%, var(--brand-color) 12%);
        --surface-dark: linear-gradient(180deg, #0d0a08, #16110d);
        --surface-dark-soft: color-mix(in srgb, #120e0b 78%, var(--brand-color) 22%);

        --text-strong: #fff8ef;
        --text-base: #f3e8dc;
        --text-soft: #cbb9a7;
        --text-faint: #9b8b7b;

        --line-soft: color-mix(in srgb, #fff8ef 8%, transparent);
        --line-strong: color-mix(in srgb, #fff8ef 14%, transparent);

        --shadow-sm: 0 14px 34px color-mix(in srgb, #000000 36%, transparent);
        --shadow-md: 0 24px 64px color-mix(in srgb, #000000 44%, transparent);
        --shadow-lg: 0 36px 96px color-mix(in srgb, #000000 52%, transparent);
    }
}