/* ==========================================================================
   Design tokens - the single source of colour, type, space and motion.
   Theme is set by data-bs-theme on <html> (see partials/head.blade.php).
   Every other stylesheet references these tokens instead of raw values.
   ========================================================================== */

:root {
    /* Type */
    --ss-font: "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
    --ss-text-xs: 0.75rem;
    --ss-text-sm: 0.8125rem;
    --ss-text-md: 0.9375rem;
    --ss-text-lg: 1.125rem;
    --ss-text-xl: 1.375rem;
    --ss-text-2xl: 1.75rem;

    /* Space (4px grid) */
    --ss-1: 0.25rem;
    --ss-2: 0.5rem;
    --ss-3: 0.75rem;
    --ss-4: 1rem;
    --ss-5: 1.25rem;
    --ss-6: 1.5rem;
    --ss-8: 2rem;
    --ss-10: 2.5rem;

    /* Radius */
    --ss-r-sm: 6px;
    --ss-r-md: 8px;
    --ss-r-lg: 12px;
    --ss-r-full: 999px;

    /* Motion */
    --ss-fast: 120ms;
    --ss-base: 200ms;
    --ss-ease: cubic-bezier(0.2, 0, 0, 1);

    /* Layout */
    --ss-sidebar-w: 256px;
    --ss-topbar-h: 60px;
    --ss-page-max: 1320px;

    /* Image lightbox is dark in both themes */
    --ss-scrim: rgb(0 0 0 / 0.86);
    --ss-on-scrim: #ffffff;
}

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

    --ss-bg: #f7f6f2;
    --ss-surface: #ffffff;
    --ss-surface-2: #fbfaf7;
    --ss-surface-3: #f1efe9;
    --ss-overlay: rgb(20 18 12 / 0.5);

    --ss-line: #e9e6de;
    --ss-line-strong: #d8d4c9;

    --ss-ink: #1b1914;
    --ss-ink-2: #57524a;
    --ss-ink-3: #756f63;

    --ss-accent: #86650c;
    --ss-accent-solid: #d4af37;
    --ss-accent-solid-hover: #c49f2b;
    --ss-on-accent: #1a1405;
    --ss-accent-soft: #f8f0da;
    --ss-accent-ring: rgb(212 175 55 / 0.38);

    --ss-success: #14703c;
    --ss-success-soft: #e4f5ea;
    --ss-warning: #8a5a00;
    --ss-warning-soft: #fcf0d9;
    --ss-danger: #c0283a;
    --ss-danger-hover: #a81f30;
    --ss-danger-soft: #fdebed;
    --ss-on-danger: #ffffff;

    --ss-chart-mark: #a07c12;
    --ss-chart-grid: #ece9e2;

    --ss-shadow-sm: 0 1px 2px rgb(27 25 20 / 0.05);
    --ss-shadow-md: 0 4px 16px rgb(27 25 20 / 0.08);
    --ss-shadow-lg: 0 16px 48px rgb(27 25 20 / 0.16);
}

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

    --ss-bg: #0e0e0d;
    --ss-surface: #161615;
    --ss-surface-2: #1b1b19;
    --ss-surface-3: #252522;
    --ss-overlay: rgb(0 0 0 / 0.62);

    --ss-line: #2a2a27;
    --ss-line-strong: #3b3b37;

    --ss-ink: #f2f0eb;
    --ss-ink-2: #b6b2a9;
    --ss-ink-3: #928e84;

    --ss-accent: #e3c15c;
    --ss-accent-solid: #d4af37;
    --ss-accent-solid-hover: #e0bd4c;
    --ss-on-accent: #171205;
    --ss-accent-soft: rgb(212 175 55 / 0.13);
    --ss-accent-ring: rgb(212 175 55 / 0.42);

    --ss-success: #5dd08f;
    --ss-success-soft: rgb(93 208 143 / 0.13);
    --ss-warning: #f0bd5c;
    --ss-warning-soft: rgb(240 189 92 / 0.13);
    --ss-danger: #f4818e;
    --ss-danger-hover: #f79aa4;
    --ss-danger-soft: rgb(244 129 142 / 0.13);
    --ss-on-danger: #2b070c;

    --ss-chart-mark: #b58f1d;
    --ss-chart-grid: #262623;

    --ss-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --ss-shadow-md: 0 4px 16px rgb(0 0 0 / 0.45);
    --ss-shadow-lg: 0 16px 48px rgb(0 0 0 / 0.6);
}

/* Bootstrap reads these, so its components inherit the design system. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--ss-font);
    --bs-body-font-size: var(--ss-text-md);
    --bs-body-line-height: 1.6;
    --bs-body-bg: var(--ss-bg);
    --bs-body-color: var(--ss-ink);
    --bs-emphasis-color: var(--ss-ink);
    --bs-secondary-color: var(--ss-ink-2);
    --bs-tertiary-color: var(--ss-ink-3);
    --bs-secondary-bg: var(--ss-surface-3);
    --bs-tertiary-bg: var(--ss-surface-2);
    --bs-border-color: var(--ss-line);
    --bs-border-color-translucent: var(--ss-line);
    --bs-border-radius: var(--ss-r-md);
    --bs-border-radius-sm: var(--ss-r-sm);
    --bs-border-radius-lg: var(--ss-r-lg);
    --bs-link-color: var(--ss-accent);
    --bs-link-hover-color: var(--ss-accent);
    --bs-focus-ring-color: var(--ss-accent-ring);
    --bs-form-invalid-color: var(--ss-danger);
    --bs-form-invalid-border-color: var(--ss-danger);
    --bs-form-valid-color: var(--ss-success);
    --bs-form-valid-border-color: var(--ss-success);
}