@charset "UTF-8";

/*
 * Design tokens. The only file allowed to hold raw color values.
 * Layer 1: primitives (palette, scale). Never use these directly in a component.
 * Layer 2: semantic tokens (what a value means). Components read only this layer.
 * Dark values exist twice on purpose: once for the device setting and once for an
 * explicit data-theme attribute. docs/design-system/check-tokens.mjs keeps them equal.
 * Guide: docs/DESIGN_SYSTEM.md
 */

@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../fonts/NotoSansArabic-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Optional organization fonts. A browser fetches a face only when a page uses it. */
@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-Variable.ttf") format("truetype");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/Tajawal-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/Tajawal-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/Tajawal-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Alert groups: one steady colour each, readable on light and dark surfaces. */
    --alert-leads: #2f9e6f;
    --alert-messages: #3b82f6;
    --alert-work: #d9a21b;
    --alert-sales: #8b5cf6;
    --alert-support: #e5533d;
    --alert-business: #64748b;
    --alert-count-text: #ffffff;

    /* Petrol: the brand hue. */
    --petrol-50: #edf6f8;
    --petrol-100: #d6eaef;
    --petrol-200: #aed5df;
    --petrol-300: #7dbacb;
    --petrol-400: #4799b0;
    --petrol-500: #1f7d96;
    --petrol-600: #146c84;
    --petrol-700: #0f5e73;
    --petrol-800: #0c4a5b;
    --petrol-900: #0b3a48;
    --petrol-950: #072530;

    /* Alternative brand ramps, chosen per organization through data-palette. */
    --emerald-50: #eaf6f1;
    --emerald-100: #d0ebdf;
    --emerald-200: #a3d7c0;
    --emerald-300: #6dbe9d;
    --emerald-400: #3a9f7c;
    --emerald-500: #1c8263;
    --emerald-600: #157156;
    --emerald-700: #11624b;
    --emerald-800: #0d4d3b;
    --emerald-900: #0b3c2f;
    --emerald-950: #06261e;

    --indigo-50: #eef0fb;
    --indigo-100: #dadffa;
    --indigo-200: #b6bfef;
    --indigo-300: #8d9ae3;
    --indigo-400: #6474d2;
    --indigo-500: #4759bd;
    --indigo-600: #3a4aa6;
    --indigo-700: #303f92;
    --indigo-800: #263274;
    --indigo-900: #1e275b;
    --indigo-950: #12183a;

    --clay-50: #fbf0ec;
    --clay-100: #f5dcd3;
    --clay-200: #eab9a7;
    --clay-300: #dc9177;
    --clay-400: #c96c4e;
    --clay-500: #b05234;
    --clay-600: #98452b;
    --clay-700: #833a24;
    --clay-800: #672e1d;
    --clay-900: #4f2418;
    --clay-950: #2f150e;

    --graphite-50: #f1f3f5;
    --graphite-100: #e0e4e8;
    --graphite-200: #c2cad1;
    --graphite-300: #9dabb6;
    --graphite-400: #758693;
    --graphite-500: #5a6b78;
    --graphite-600: #4a5a66;
    --graphite-700: #3d4b56;
    --graphite-800: #303c45;
    --graphite-900: #252e36;
    --graphite-950: #151b20;

    /* The active brand ramp. Semantic tokens read this, so a palette only re-points it. */
    --brand-50: var(--petrol-50);
    --brand-100: var(--petrol-100);
    --brand-200: var(--petrol-200);
    --brand-300: var(--petrol-300);
    --brand-400: var(--petrol-400);
    --brand-500: var(--petrol-500);
    --brand-600: var(--petrol-600);
    --brand-700: var(--petrol-700);
    --brand-800: var(--petrol-800);
    --brand-900: var(--petrol-900);
    --brand-950: var(--petrol-950);

    /* Sunrise: the warm accent. Used rarely: the current journey stage and the public call to action. */
    --sunrise-50: #fef5e7;
    --sunrise-100: #fde6c3;
    --sunrise-200: #fbd08e;
    --sunrise-300: #f7b95b;
    --sunrise-400: #f2a33a;
    --sunrise-500: #dd8a1c;
    --sunrise-600: #b96f10;
    --sunrise-700: #8f5409;
    --sunrise-800: #6b3e08;
    --sunrise-900: #4a2b07;

    /* Mist: neutrals biased toward petrol. */
    --mist-0: #ffffff;
    --mist-25: #f8fbfb;
    --mist-50: #f0f5f6;
    --mist-100: #e6eef0;
    --mist-200: #d3e0e4;
    --mist-300: #b8c9cf;
    --mist-400: #7d949d;
    --mist-500: #647c86;
    --mist-600: #4f6b75;
    --mist-700: #37525c;
    --mist-800: #1f3a44;
    --mist-900: #0b2e3a;

    /* Night: dark theme surfaces. */
    --night-950: #0b161b;
    --night-900: #101e25;
    --night-850: #15262e;
    --night-800: #1b2f38;
    --night-700: #2b424c;
    --night-600: #3f5a65;
    --night-500: #6e8893;
    --night-300: #a3b7bf;
    --night-100: #e3edf0;

    /* Status hues. */
    --leaf-100: #d3eedf;
    --leaf-50: #e9f6ef;
    --leaf-300: #6fd0a0;
    --leaf-700: #1a6b44;
    --leaf-950: #10301f;
    --leaf-800: #1d4a33;
    --ember-50: #fdeeed;
    --ember-100: #f9d8d5;
    --ember-300: #f4a39d;
    --ember-700: #a82a2a;
    --ember-800: #5c2523;
    --ember-950: #351716;
    --sky-50: #e9f2fb;
    --sky-100: #d2e4f6;
    --sky-300: #93c2ee;
    --sky-700: #235c96;
    --sky-800: #254767;
    --sky-950: #14283c;
    --plum-50: #f2eefb;
    --plum-100: #e2d9f6;
    --plum-300: #c4b0ee;
    --plum-700: #5a3aa0;
    --plum-800: #43307a;
    --plum-900: #3a2470;
    --plum-950: #231a3d;

    /* Type */
    --font-latin: "Inter", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
    --font-arabic: "Noto Sans Arabic", "Inter", Tahoma, sans-serif;
    --font-mono: Consolas, "Courier New", monospace;
    --font-ui: var(--font-latin);

    --text-xs: .8rem;
    --text-sm: .875rem;
    --text-md: 1rem;
    --text-lg: 1.133rem;
    --text-xl: 1.333rem;
    --text-2xl: 1.6rem;
    --text-3xl: 2rem;
    --text-4xl: 2.667rem;
    --text-display: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-tight: 1.25;
    --leading-heading: 1.35;
    --leading-body: 1.55;
    --leading-relaxed: 1.7;

    --tracking-heading: -.015em;
    --tracking-display: -.03em;

    /* Space: 4px grid. */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    /* Density: the workspace is scanned all day, so rows and controls stay compact. */
    --control-sm: 32px;
    --control-md: 40px;
    --control-lg: 46px;
    --touch-min: 44px;
    --table-cell-block: 10px;
    --table-cell-inline: 16px;
    --card-padding: 20px;
    --page-gutter: 28px;
    --sidebar-width: 236px;
    --content-max: 1400px;
    --reading-max: 68ch;

    /* Shape */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    --border-thin: 1px;
    --border-thick: 2px;

    /* Motion */
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --duration-fast: 120ms;
    --duration-base: 180ms;

    /* Layers */
    --z-sticky: 30;
    --z-skip: 100;
}

:root,
[data-theme="light"] {
    color-scheme: light;

    --color-canvas: var(--mist-50);
    --color-surface: var(--mist-0);
    --color-surface-sunken: var(--mist-25);
    --color-surface-hover: var(--mist-50);
    --color-surface-selected: var(--brand-50);
    --color-column: var(--mist-100);

    --color-text: var(--mist-900);
    --color-text-muted: var(--mist-600);
    --color-text-disabled: var(--mist-500);
    --color-text-on-strong: var(--mist-0);

    --color-border: var(--mist-200);
    --color-border-subtle: var(--mist-100);
    --color-border-control: var(--mist-400);

    --color-primary: var(--brand-700);
    --color-primary-hover: var(--brand-800);
    --color-primary-soft: var(--brand-50);
    --color-on-primary: var(--mist-0);
    --color-link: var(--brand-700);

    --color-accent: var(--sunrise-400);
    --color-accent-hover: var(--sunrise-300);
    --color-accent-soft: var(--sunrise-50);
    --color-accent-text: var(--sunrise-700);
    --color-on-accent: var(--sunrise-900);

    --color-focus: var(--brand-500);
    --color-selection: var(--brand-100);

    --color-neutral-bg: var(--mist-100);
    --color-neutral-border: var(--mist-200);
    --color-neutral-text: var(--mist-700);
    --color-success-bg: var(--leaf-50);
    --color-success-border: var(--leaf-100);
    --color-success-text: var(--leaf-700);
    --color-warning-bg: var(--sunrise-50);
    --color-warning-border: var(--sunrise-100);
    --color-warning-text: var(--sunrise-800);
    --color-danger-bg: var(--ember-50);
    --color-danger-border: var(--ember-100);
    --color-danger-text: var(--ember-700);
    --color-info-bg: var(--sky-50);
    --color-info-border: var(--sky-100);
    --color-info-text: var(--sky-700);
    --color-operator-bg: var(--plum-50);
    --color-operator-border: var(--plum-100);
    --color-operator-text: var(--plum-700);

    /* The navigation stays dark in both themes, so it keeps its own set. */
    --nav-bg: var(--brand-900);
    --nav-text: var(--brand-100);
    --nav-text-muted: var(--brand-200);
    --nav-hover-bg: var(--brand-800);
    --nav-active-bg: var(--brand-50);
    --nav-active-text: var(--brand-900);
    --nav-border: var(--brand-800);
    --nav-focus: var(--sunrise-300);

    --operator-strip-bg: var(--plum-900);
    --operator-strip-text: var(--plum-50);

    --brand-mark-route: var(--brand-700);
    --brand-mark-node: var(--sunrise-500);

    --shadow-color: rgb(11 46 58 / .08);
    --shadow-1: 0 1px 2px var(--shadow-color);
    --shadow-2: 0 4px 14px var(--shadow-color);
    --shadow-3: 0 14px 38px var(--shadow-color);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-canvas: var(--night-950);
        --color-surface: var(--night-900);
        --color-surface-sunken: var(--night-850);
        --color-surface-hover: var(--night-800);
        --color-surface-selected: var(--night-800);
        --color-column: var(--night-850);

        --color-text: var(--night-100);
        --color-text-muted: var(--night-300);
        --color-text-disabled: var(--night-500);
        --color-text-on-strong: var(--mist-0);

        --color-border: var(--night-700);
        --color-border-subtle: var(--night-800);
        --color-border-control: var(--night-500);

        --color-primary: var(--brand-300);
        --color-primary-hover: var(--brand-200);
        --color-primary-soft: var(--night-800);
        --color-on-primary: var(--brand-950);
        --color-link: var(--brand-300);

        --color-accent: var(--sunrise-400);
        --color-accent-hover: var(--sunrise-300);
        --color-accent-soft: var(--night-800);
        --color-accent-text: var(--sunrise-300);
        --color-on-accent: var(--sunrise-900);

        --color-focus: var(--brand-300);
        --color-selection: var(--brand-800);

        --color-neutral-bg: var(--night-800);
        --color-neutral-border: var(--night-700);
        --color-neutral-text: var(--night-300);
        --color-success-bg: var(--leaf-950);
        --color-success-border: var(--leaf-800);
        --color-success-text: var(--leaf-300);
        --color-warning-bg: var(--sunrise-900);
        --color-warning-border: var(--sunrise-800);
        --color-warning-text: var(--sunrise-200);
        --color-danger-bg: var(--ember-950);
        --color-danger-border: var(--ember-800);
        --color-danger-text: var(--ember-300);
        --color-info-bg: var(--sky-950);
        --color-info-border: var(--sky-800);
        --color-info-text: var(--sky-300);
        --color-operator-bg: var(--plum-950);
        --color-operator-border: var(--plum-800);
        --color-operator-text: var(--plum-300);

        --nav-bg: var(--night-900);
        --nav-text: var(--night-100);
        --nav-text-muted: var(--night-300);
        --nav-hover-bg: var(--night-800);
        --nav-active-bg: var(--brand-800);
        --nav-active-text: var(--mist-0);
        --nav-border: var(--night-700);
        --nav-focus: var(--sunrise-300);

        --operator-strip-bg: var(--plum-800);
        --operator-strip-text: var(--plum-50);

        --brand-mark-route: var(--brand-200);
        --brand-mark-node: var(--sunrise-400);

        --shadow-color: rgb(0 0 0 / .35);
        --shadow-1: 0 1px 2px var(--shadow-color);
        --shadow-2: 0 4px 14px var(--shadow-color);
        --shadow-3: 0 14px 38px var(--shadow-color);
    }
}

[data-theme="dark"] {
    color-scheme: dark;

    --color-canvas: var(--night-950);
    --color-surface: var(--night-900);
    --color-surface-sunken: var(--night-850);
    --color-surface-hover: var(--night-800);
    --color-surface-selected: var(--night-800);
    --color-column: var(--night-850);

    --color-text: var(--night-100);
    --color-text-muted: var(--night-300);
    --color-text-disabled: var(--night-500);
    --color-text-on-strong: var(--mist-0);

    --color-border: var(--night-700);
    --color-border-subtle: var(--night-800);
    --color-border-control: var(--night-500);

    --color-primary: var(--brand-300);
    --color-primary-hover: var(--brand-200);
    --color-primary-soft: var(--night-800);
    --color-on-primary: var(--brand-950);
    --color-link: var(--brand-300);

    --color-accent: var(--sunrise-400);
    --color-accent-hover: var(--sunrise-300);
    --color-accent-soft: var(--night-800);
    --color-accent-text: var(--sunrise-300);
    --color-on-accent: var(--sunrise-900);

    --color-focus: var(--brand-300);
    --color-selection: var(--brand-800);

    --color-neutral-bg: var(--night-800);
    --color-neutral-border: var(--night-700);
    --color-neutral-text: var(--night-300);
    --color-success-bg: var(--leaf-950);
    --color-success-border: var(--leaf-800);
    --color-success-text: var(--leaf-300);
    --color-warning-bg: var(--sunrise-900);
    --color-warning-border: var(--sunrise-800);
    --color-warning-text: var(--sunrise-200);
    --color-danger-bg: var(--ember-950);
    --color-danger-border: var(--ember-800);
    --color-danger-text: var(--ember-300);
    --color-info-bg: var(--sky-950);
    --color-info-border: var(--sky-800);
    --color-info-text: var(--sky-300);
    --color-operator-bg: var(--plum-950);
    --color-operator-border: var(--plum-800);
    --color-operator-text: var(--plum-300);

    --nav-bg: var(--night-900);
    --nav-text: var(--night-100);
    --nav-text-muted: var(--night-300);
    --nav-hover-bg: var(--night-800);
    --nav-active-bg: var(--brand-800);
    --nav-active-text: var(--mist-0);
    --nav-border: var(--night-700);
    --nav-focus: var(--sunrise-300);

    --operator-strip-bg: var(--plum-800);
    --operator-strip-text: var(--plum-50);

    --brand-mark-route: var(--brand-200);
    --brand-mark-node: var(--sunrise-400);

    --shadow-color: rgb(0 0 0 / .35);
    --shadow-1: 0 1px 2px var(--shadow-color);
    --shadow-2: 0 4px 14px var(--shadow-color);
    --shadow-3: 0 14px 38px var(--shadow-color);
}

/*
 * Palettes. One attribute on the root element re-points the brand ramp, and every semantic token
 * follows in both themes. Status colors, the accent and platform plum never change, so meaning
 * stays stable across organizations. check-tokens.mjs validates contrast for each palette.
 */
[data-palette="emerald"] {
    --brand-50: var(--emerald-50);
    --brand-100: var(--emerald-100);
    --brand-200: var(--emerald-200);
    --brand-300: var(--emerald-300);
    --brand-400: var(--emerald-400);
    --brand-500: var(--emerald-500);
    --brand-600: var(--emerald-600);
    --brand-700: var(--emerald-700);
    --brand-800: var(--emerald-800);
    --brand-900: var(--emerald-900);
    --brand-950: var(--emerald-950);
}

[data-palette="indigo"] {
    --brand-50: var(--indigo-50);
    --brand-100: var(--indigo-100);
    --brand-200: var(--indigo-200);
    --brand-300: var(--indigo-300);
    --brand-400: var(--indigo-400);
    --brand-500: var(--indigo-500);
    --brand-600: var(--indigo-600);
    --brand-700: var(--indigo-700);
    --brand-800: var(--indigo-800);
    --brand-900: var(--indigo-900);
    --brand-950: var(--indigo-950);
}

[data-palette="clay"] {
    --brand-50: var(--clay-50);
    --brand-100: var(--clay-100);
    --brand-200: var(--clay-200);
    --brand-300: var(--clay-300);
    --brand-400: var(--clay-400);
    --brand-500: var(--clay-500);
    --brand-600: var(--clay-600);
    --brand-700: var(--clay-700);
    --brand-800: var(--clay-800);
    --brand-900: var(--clay-900);
    --brand-950: var(--clay-950);
}

[data-palette="graphite"] {
    --brand-50: var(--graphite-50);
    --brand-100: var(--graphite-100);
    --brand-200: var(--graphite-200);
    --brand-300: var(--graphite-300);
    --brand-400: var(--graphite-400);
    --brand-500: var(--graphite-500);
    --brand-600: var(--graphite-600);
    --brand-700: var(--graphite-700);
    --brand-800: var(--graphite-800);
    --brand-900: var(--graphite-900);
    --brand-950: var(--graphite-950);
}

/* Fonts. "system" uses the device's own interface font and downloads nothing. */
[data-font="system"] {
    --font-latin: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-arabic: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}

[data-font="cairo"] {
    --font-latin: "Cairo", "Inter", "Segoe UI", Arial, sans-serif;
    --font-arabic: "Cairo", "Noto Sans Arabic", Tahoma, sans-serif;
}

/* These two lack Turkish letters such as ğ and ş, so Turkish keeps Inter instead of mixing fonts inside a word. */
[data-font="tajawal"] {
    --font-arabic: "Tajawal", "Noto Sans Arabic", Tahoma, sans-serif;
}

[data-font="tajawal"]:not([lang="tr"]) {
    --font-latin: "Tajawal", "Inter", "Segoe UI", Arial, sans-serif;
}

[data-font="plex"] {
    --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
}

[data-font="plex"]:not([lang="tr"]) {
    --font-latin: "IBM Plex Sans Arabic", "Inter", "Segoe UI", Arial, sans-serif;
}

/*
 * Arabic: a joined script. Letter spacing breaks the joins, and the taller forms need more leading.
 * Scoped by attribute so a mixed-language element can opt in on its own.
 */
[lang="ar"] {
    --font-ui: var(--font-arabic);
    --leading-tight: 1.5;
    --leading-heading: 1.6;
    --leading-body: 1.8;
    --leading-relaxed: 1.95;
    --tracking-heading: 0;
    --tracking-display: 0;
}

@media (max-width: 760px) {
    :root {
        --page-gutter: 16px;
        --card-padding: 16px;
        --table-cell-inline: 12px;
    }
}

@media print {
    :root,
    [data-theme="dark"] {
        color-scheme: light;
    }
}

/* Bands that stay on the brand color in both themes, such as the public hero. */
.surface-brand {
    --color-text: var(--nav-text);
    --color-text-muted: var(--nav-text-muted);
    --color-surface: var(--nav-bg);
    --color-primary: var(--brand-200);
    --color-accent-soft: var(--brand-800);
    --color-border-control: var(--brand-400);
    --color-focus: var(--nav-focus);
    background: var(--nav-bg);
    color: var(--nav-text);
}