@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../../fonts/hanken-grotesk/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../../fonts/hanken-grotesk/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Noto Naskh Arabic";
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url("../../fonts/noto-naskh-arabic/noto-naskh-arabic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
    --water: #F5F1E4;
    --water-deep: #ECE6D2;
    --paper: #FFFDF7;
    --ink: #2C2E2A;
    --ink-soft: #55574F;
    --ink-faint: #7A7B72;
    --rule: color-mix(in oklab, var(--ink) 16%, var(--water));
    --rule-strong: color-mix(in oklab, var(--ink) 34%, var(--water));

    --sun: #FFD23F;
    --sun-deep: #F2BE12;
    --coral: #FF6B5A;
    --coral-deep: #E2503F;
    --alarm: #B80707;
    --pond: #4FA6E3;
    --link: #0062A8;
    --lilac: #EBC1FF;
    --leaf: #8ED462;

    --brand: #5BAEE8;
    --land: var(--brand);
    --land-ink: #2C2E2A;
    --on-color: #2C2E2A;
    --land-soft: color-mix(in oklab, var(--land) 22%, var(--water));
    --land-deep: color-mix(in oklab, var(--land) 62%, var(--ink));

    --font: "Hanken Grotesk", "Noto Naskh Arabic", "Segoe UI", system-ui, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2.25rem;
    --text-display: 3.5rem;
    --leading-display: 0.95;
    --tracking-display: -0.04em;

    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;

    --r-capsule: 999px;
    --r-field: 14px;
    --r-lobe: 28px;
    --r-card: 20px;
    --hair: 1px;
    --tap: 44px;

    --elev: 0 18px 44px -14px rgb(44 46 42 / 0.38), 0 2px 6px rgb(44 46 42 / 0.08);

    --ease-over: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-over: 0.4s;
    --dur-fast: 0.14s;

    --sidebar-w: 248px;
    --sidebar-rail: 76px;
    --topbar-h: 64px;

    color-scheme: light;
}

[data-brand="datascope"] { --brand: #5BAEE8; }
[data-brand="emerald"] { --brand: #8ED462; }
[data-brand="teal"] { --brand: #6ED3BF; }
[data-brand="violet"] { --brand: #C9B2FF; }
[data-brand="rose"] { --brand: #FF9EAE; }
[data-brand="amber"] { --brand: #F9B95C; }
[data-brand="slate"] { --brand: #AEBCC9; }
[data-brand="indigo"] { --brand: #9EA9F7; }

[data-theme="dark"] {
    --water: #1B1D1A;
    --water-deep: #23261F;
    --paper: #262922;
    --ink: #F1EDE0;
    --ink-soft: #C4C0B2;
    --ink-faint: #9A978B;
    --link: #8CC8F2;
    --alarm: #FF8A7C;
    --land: color-mix(in oklab, var(--brand) 26%, #141613);
    --land-ink: #F1EDE0;
    --land-soft: color-mix(in oklab, var(--brand) 20%, var(--water));
    --land-deep: var(--brand);
    --rule: color-mix(in oklab, var(--ink) 14%, var(--water));
    --rule-strong: color-mix(in oklab, var(--ink) 28%, var(--water));
    --elev: 0 18px 44px -14px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.3);
    color-scheme: dark;
}

[data-theme="dark"] .sun-fill {
    --ink: #2C2E2A;
    --ink-soft: #3F413B;
    color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-over: 0.01s;
        --dur-fast: 0.01s;
    }
}

:lang(ur), :lang(ur) * { letter-spacing: 0 !important; }
:lang(ur) body { line-height: 1.65; }