/* /public/assets/css/variables.css */

:root {
    /* Brand palette */
    --turquoise-surf: #06aed5;
    --cerulean: #086788;
    --bright-amber: #f0c808;
    --papaya-whip: #fff1d0;
    --primary-scarlet: #dd1c1a;

    /* Extended neutrals */
    --ink-1000: #041218;
    --ink-950: #071b24;
    --ink-900: #0b2733;
    --ink-850: #123440;
    --ink-800: #173f4d;
    --ink-700: #36515c;
    --ink-600: #526a74;
    --ink-500: #6f838b;
    --ink-400: #93a4aa;
    --ink-300: #bcc9cd;
    --ink-200: #dbe5e8;
    --ink-150: #e8eff1;
    --ink-100: #f2f6f7;
    --ink-50: #f8fbfc;
    --white: #ffffff;
    --black: #000000;

    /* Semantic colours */
    --success: #118963;
    --success-strong: #08704f;
    --success-soft: #e6f7f0;
    --warning: #a86e00;
    --warning-strong: #7a4f00;
    --warning-soft: #fff5d6;
    --danger: var(--primary-scarlet);
    --danger-strong: #b7110f;
    --danger-soft: #fff0ef;
    --info: var(--turquoise-surf);
    --info-strong: var(--cerulean);
    --info-soft: #e9f9fd;

    /* Surfaces */
    --page-background: #f6fafb;
    --page-background-warm: #fffaf0;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-muted: #f3f7f8;
    --surface-subtle: #f8fbfc;
    --surface-inverse: var(--ink-950);
    --surface-brand: var(--cerulean);
    --surface-brand-strong: #065a76;
    --overlay: rgba(4, 18, 24, 0.62);

    /* Text */
    --text-primary: var(--ink-950);
    --text-secondary: var(--ink-700);
    --text-muted: var(--ink-500);
    --text-faint: var(--ink-400);
    --text-inverse: #ffffff;
    --text-link: var(--cerulean);
    --text-link-hover: #04526d;

    /* Borders */
    --border: #dbe5e8;
    --border-strong: #bccdd2;
    --border-soft: #e9f0f2;
    --focus-ring: rgba(6, 174, 213, 0.35);

    /* Typography */
    --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Outfit", "Inter", system-ui, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;

    --line-tight: 1.1;
    --line-snug: 1.3;
    --line-normal: 1.55;
    --line-relaxed: 1.75;

    /* Spacing */
    --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: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;

    /* Radius */
    --radius-xs: 0.375rem;
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.125rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-3xl: 2.5rem;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(7, 27, 36, 0.05);
    --shadow-sm: 0 4px 14px rgba(7, 27, 36, 0.07);
    --shadow-md: 0 12px 30px rgba(7, 27, 36, 0.1);
    --shadow-lg: 0 22px 55px rgba(7, 27, 36, 0.14);
    --shadow-xl: 0 30px 85px rgba(7, 27, 36, 0.18);
    --shadow-brand: 0 16px 40px rgba(6, 174, 213, 0.25);
    --shadow-danger: 0 14px 30px rgba(221, 28, 26, 0.18);

    /* Layout */
    --container-width: 1200px;
    --container-wide: 1440px;
    --public-header-height: 78px;
    --app-topbar-height: 72px;
    --app-sidebar-width: 276px;
    --admin-sidebar-width: 292px;
    --content-gutter: clamp(1rem, 2.5vw, 2.25rem);

    /* Motion */
    --duration-fast: 120ms;
    --duration-normal: 220ms;
    --duration-slow: 360ms;
    --ease-standard: cubic-bezier(0.2, 0.75, 0.2, 1);
    --ease-out: cubic-bezier(0, 0.7, 0.3, 1);

    /* Layering */
    --z-base: 1;
    --z-sticky: 20;
    --z-dropdown: 40;
    --z-overlay: 60;
    --z-modal: 80;
    --z-toast: 100;
    --z-loader: 120;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --page-background: #06171f;
    --page-background-warm: #111b1d;
    --surface: #0c2530;
    --surface-raised: #10313d;
    --surface-muted: #102a34;
    --surface-subtle: #0a2029;
    --surface-inverse: #ffffff;
    --text-primary: #f5fbfc;
    --text-secondary: #c3d2d6;
    --text-muted: #91a7ae;
    --text-faint: #708991;
    --border: #23434e;
    --border-strong: #315661;
    --border-soft: #183640;
    --overlay: rgba(0, 0, 0, 0.72);
    --success-soft: rgba(17, 137, 99, 0.16);
    --warning-soft: rgba(240, 200, 8, 0.13);
    --danger-soft: rgba(221, 28, 26, 0.15);
    --info-soft: rgba(6, 174, 213, 0.13);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 5px 16px rgba(0, 0, 0, 0.26);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.31);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.37);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --page-background: #06171f;
        --page-background-warm: #111b1d;
        --surface: #0c2530;
        --surface-raised: #10313d;
        --surface-muted: #102a34;
        --surface-subtle: #0a2029;
        --surface-inverse: #ffffff;
        --text-primary: #f5fbfc;
        --text-secondary: #c3d2d6;
        --text-muted: #91a7ae;
        --text-faint: #708991;
        --border: #23434e;
        --border-strong: #315661;
        --border-soft: #183640;
        --overlay: rgba(0, 0, 0, 0.72);
        --success-soft: rgba(17, 137, 99, 0.16);
        --warning-soft: rgba(240, 200, 8, 0.13);
        --danger-soft: rgba(221, 28, 26, 0.15);
        --info-soft: rgba(6, 174, 213, 0.13);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
        --shadow-sm: 0 5px 16px rgba(0, 0, 0, 0.26);
        --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.31);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.37);
    }
}