@import url("fonts.css");

/* ==========================================================================
   Wasfa Design System — tokens
   The single source of truth for colour, type, space, elevation and motion.
   Nothing below this file may hard-code a hex value or a pixel spacing.
   ========================================================================== */

/* --------------------------------------------------------------- typography */

:root {
    /* ------------------------------------------------------------- brand */
    --brand-900: #0d3557;
    --brand-800: #113f6c;
    --brand-700: #15508a;          /* primary   */
    --brand-600: #17679f;
    --brand-500: #1691d0;          /* secondary */
    --brand-400: #2fa9e0;          /* accent    */
    --brand-300: #6cc5ea;
    --brand-200: #a9dcf2;
    --brand-100: #d5eefa;
    --brand-50:  #eef8fd;

    --brand-primary: var(--brand-700);
    --brand-secondary: var(--brand-500);
    --brand-accent: var(--brand-400);

    /* Gradients carry the brand through headers, tiles and empty states. */
    --gradient-brand: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 55%, var(--brand-400) 100%);
    --gradient-brand-soft: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%);
    --gradient-sheen: linear-gradient(180deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 0%));

    /* ------------------------------------------------------ status colours */
    /* Despite the name, these are whole colours, not hue angles. Anything
       written as `hsl(var(--hue-success) 45% 40%)` is invalid and the whole
       declaration is dropped — silently, which is how twenty-one tinted
       colours across this sheet turned out to be doing nothing at all. Use the
       angles below when varying lightness. */
    --hue-info: #0284c7;
    --hue-success: #15803d;
    --hue-warning: #b45309;
    --hue-danger: #b91c1c;
    --hue-neutral: #475569;

    /* The same five as hue angles, for hsl() — derived from the hex above so
       a tinted variant stays the same colour family as the solid one. */
    --h-info: 200;
    --h-success: 142;
    --h-warning: 26;
    --h-danger: 0;
    --h-neutral: 215;

    /* ------------------------------------------------------------ spacing */
    /* 4 px base. Never write a raw margin — pick a step. */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;
    --space-11: 5rem;

    /* Gutters grow with the viewport instead of jumping at breakpoints. */
    --gutter: clamp(1rem, 0.65rem + 1.6vw, 2rem);
    --section-gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);

    /* --------------------------------------------------------- typography */
    --font-sans: "Cairo", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

    /* Fluid scale — readable at 320 px, comfortable at 2560 px. */
    --text-2xs: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);
    --text-xs:  clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
    --text-sm:  clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
    --text-base: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
    --text-md:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --text-lg:  clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
    --text-xl:  clamp(1.3125rem, 1.22rem + 0.45vw, 1.625rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2.125rem);
    --text-3xl: clamp(1.875rem, 1.6rem + 1.35vw, 3rem);
    --text-display: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);

    --leading-tight: 1.25;
    --leading-snug: 1.4;
    --leading-normal: 1.65;
    --leading-relaxed: 1.85;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* Arabic sits better with a touch of positive tracking at small sizes. */
    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;

    /* ------------------------------------------------------------- radius */
    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-pill: 999px;

    /* ---------------------------------------------------------- elevation */
    --shadow-color: 215 45% 22%;

    --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 6%);
    --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 5%),
                 0 2px 6px -2px hsl(var(--shadow-color) / 8%);
    --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 5%),
                 0 8px 20px -6px hsl(var(--shadow-color) / 12%);
    --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 5%),
                 0 20px 40px -12px hsl(var(--shadow-color) / 18%);
    --shadow-xl: 0 8px 16px hsl(var(--shadow-color) / 6%),
                 0 32px 64px -20px hsl(var(--shadow-color) / 25%);
    --shadow-focus: 0 0 0 3px var(--ring);

    /* ------------------------------------------------------------- motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-instant: 90ms;
    --duration-fast: 160ms;
    --duration-normal: 240ms;
    --duration-slow: 380ms;

    /* ------------------------------------------------------------ layout */
    --topbar-h: 60px;
    --bottomnav-h: 62px;
    --sidebar-w: 264px;
    --sidebar-w-collapsed: 76px;
    --content-max: 1600px;
    --reading-max: 46rem;

    --z-base: 1;
    --z-sticky: 100;
    --z-drawer: 1045;
    --z-topbar: 1030;
    --z-bottomnav: 1035;
    --z-modal: 1055;
    --z-toast: 1090;

    /* -------------------------------------------------------- safe areas */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-inline-start: env(safe-area-inset-left, 0px);
    --safe-inline-end: env(safe-area-inset-right, 0px);
}

/* ==========================================================================
   Themes — light is the default; dark overrides only the semantic layer.
   ========================================================================== */

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

    --bg-canvas: #f4f7fb;
    --bg-surface: #ffffff;
    --bg-surface-2: #fbfcfe;
    --bg-surface-3: #f1f5f9;
    --bg-inset: #eef2f7;
    --bg-overlay: rgb(9 24 40 / 45%);
    --bg-glass: rgb(255 255 255 / 72%);
    --bg-glass-border: rgb(255 255 255 / 60%);

    --fg-default: #0f2237;
    --fg-muted: #5b6b7f;
    --fg-subtle: #8093a8;
    --fg-on-brand: #ffffff;
    --fg-inverted: #ffffff;

    --border-subtle: #e3eaf2;
    --border-default: #d3dde9;
    --border-strong: #b9c8d8;

    --ring: rgb(22 145 208 / 35%);

    --accent-soft-bg: var(--brand-50);
    --accent-soft-fg: var(--brand-700);

    --status-received-bg: #eef2f7;   --status-received-fg: #47576b;
    --status-reviewing-bg: #e0f2fe;  --status-reviewing-fg: #0369a1;
    --status-preparing-bg: #fef3c7;  --status-preparing-fg: #92400e;
    --status-ready-bg: #dcfce7;      --status-ready-fg: #15803d;
    --status-delivered-bg: #dbeafe;  --status-delivered-fg: #1d4ed8;
    --status-cancelled-bg: #fee2e2;  --status-cancelled-fg: #b91c1c;

    --skeleton-base: #e8eef5;
    --skeleton-sheen: #f5f8fb;
}

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

    --bg-canvas: #0a1421;
    --bg-surface: #101f31;
    --bg-surface-2: #14273c;
    --bg-surface-3: #1a3047;
    --bg-inset: #0d1a29;
    --bg-overlay: rgb(3 10 18 / 65%);
    --bg-glass: rgb(16 31 49 / 72%);
    --bg-glass-border: rgb(255 255 255 / 10%);

    --fg-default: #e8f0f8;
    --fg-muted: #a3b5c9;
    --fg-subtle: #7489a1;
    --fg-on-brand: #ffffff;
    --fg-inverted: #0f2237;

    --border-subtle: #1d3348;
    --border-default: #26415a;
    --border-strong: #35566f;

    --ring: rgb(47 169 224 / 45%);

    --shadow-color: 210 60% 4%;
    --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 40%);
    --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 35%),
                 0 2px 6px -2px hsl(var(--shadow-color) / 45%);
    --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 35%),
                 0 8px 20px -6px hsl(var(--shadow-color) / 55%);
    --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 40%),
                 0 20px 40px -12px hsl(var(--shadow-color) / 65%);
    --shadow-xl: 0 8px 16px hsl(var(--shadow-color) / 45%),
                 0 32px 64px -20px hsl(var(--shadow-color) / 70%);

    /* Brighter mid-tones read better than the primary on a dark canvas. */
    --brand-primary: var(--brand-500);
    --accent-soft-bg: rgb(22 145 208 / 16%);
    --accent-soft-fg: var(--brand-300);

    --gradient-brand-soft: linear-gradient(135deg, rgb(21 80 138 / 30%) 0%, rgb(22 145 208 / 18%) 100%);

    --hue-info: #38bdf8;
    --hue-success: #4ade80;
    --hue-warning: #fbbf24;
    --hue-danger: #f87171;
    --hue-neutral: #94a3b8;

    --status-received-bg: rgb(148 163 184 / 16%);  --status-received-fg: #cbd5e1;
    --status-reviewing-bg: rgb(56 189 248 / 16%);  --status-reviewing-fg: #7dd3fc;
    --status-preparing-bg: rgb(251 191 36 / 16%);  --status-preparing-fg: #fcd34d;
    --status-ready-bg: rgb(74 222 128 / 16%);      --status-ready-fg: #86efac;
    --status-delivered-bg: rgb(96 165 250 / 16%);  --status-delivered-fg: #93c5fd;
    --status-cancelled-bg: rgb(248 113 113 / 16%); --status-cancelled-fg: #fca5a5;

    --skeleton-base: #17293d;
    --skeleton-sheen: #1f374f;
}

/* "Auto" follows the operating system until the user picks a side. */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        color-scheme: dark;

        --bg-canvas: #0a1421;
        --bg-surface: #101f31;
        --bg-surface-2: #14273c;
        --bg-surface-3: #1a3047;
        --bg-inset: #0d1a29;
        --bg-overlay: rgb(3 10 18 / 65%);
        --bg-glass: rgb(16 31 49 / 72%);
        --bg-glass-border: rgb(255 255 255 / 10%);

        --fg-default: #e8f0f8;
        --fg-muted: #a3b5c9;
        --fg-subtle: #7489a1;
        --fg-inverted: #0f2237;

        --border-subtle: #1d3348;
        --border-default: #26415a;
        --border-strong: #35566f;

        --ring: rgb(47 169 224 / 45%);
        --shadow-color: 210 60% 4%;

        --brand-primary: var(--brand-500);
        --accent-soft-bg: rgb(22 145 208 / 16%);
        --accent-soft-fg: var(--brand-300);
        --gradient-brand-soft: linear-gradient(135deg, rgb(21 80 138 / 30%) 0%, rgb(22 145 208 / 18%) 100%);

        --hue-info: #38bdf8;
        --hue-success: #4ade80;
        --hue-warning: #fbbf24;
        --hue-danger: #f87171;
        --hue-neutral: #94a3b8;

        --status-received-bg: rgb(148 163 184 / 16%);  --status-received-fg: #cbd5e1;
        --status-reviewing-bg: rgb(56 189 248 / 16%);  --status-reviewing-fg: #7dd3fc;
        --status-preparing-bg: rgb(251 191 36 / 16%);  --status-preparing-fg: #fcd34d;
        --status-ready-bg: rgb(74 222 128 / 16%);      --status-ready-fg: #86efac;
        --status-delivered-bg: rgb(96 165 250 / 16%);  --status-delivered-fg: #93c5fd;
        --status-cancelled-bg: rgb(248 113 113 / 16%); --status-cancelled-fg: #fca5a5;

        --skeleton-base: #17293d;
        --skeleton-sheen: #1f374f;
    }
}