/* ==========================================================================
   Fast Print — design tokens
   --------------------------------------------------------------------------
   Single source of truth for brand colour, typography, radius and elevation.

   Loaded by BOTH:
     • the admin dashboard — on top of Tabler, overriding its CSS variables
     • the public chat widget — standalone, with no framework at all

   Everything here is plain CSS custom properties, so the file is completely
   inert when Tabler is absent (the --tblr-* overrides are simply unused).
   The widget must never load Tabler; see docs/UI.md.
   ========================================================================== */

:root {
    /* --- brand palette --------------------------------------------------- */
    --fp-brand-primary: #6C5CE7;   /* deep purple */
    --fp-brand-accent:  #00CEC9;   /* teal        */
    --fp-brand-success: #00B894;
    --fp-brand-warning: #FDCB6E;
    --fp-brand-danger:  #FF7675;
    --fp-brand-ink:     #2D3436;
    --fp-brand-muted:   #636E72;
    --fp-brand-surface: #FFFFFF;
    --fp-brand-canvas:  #F7F8FC;

    /* RGB triplets — required by the rgba() tint patterns in Tabler */
    --fp-primary-rgb: 108, 92, 231;
    --fp-accent-rgb:  0, 206, 201;
    --fp-success-rgb: 0, 184, 148;
    --fp-warning-rgb: 253, 203, 110;
    --fp-danger-rgb:  255, 118, 117;

    /* Soft tints for badges, alert backgrounds and ghost buttons */
    --fp-primary-lt: #EDEBFC;
    --fp-accent-lt:  #E0F9F8;
    --fp-success-lt: #E0F6F2;
    --fp-warning-lt: #FFF6E5;
    --fp-danger-lt:  #FFEFEE;

    /* Hover/active shades */
    --fp-primary-darken: #5A4BD1;
    --fp-accent-darken:  #00B3AF;
    --fp-success-darken: #009E7F;
    --fp-warning-darken: #F0B84E;
    --fp-danger-darken:  #F05D5C;

    /* --- typography ------------------------------------------------------ */
    --fp-font-ar: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif;
    --fp-font-en: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fp-font-sans-serif: var(--fp-font-en);

    --fp-text-xs: .75rem;
    --fp-text-sm: .8125rem;
    --fp-text-base: .9375rem;   /* 15px — Arabic is easier to read than at 14px */
    --fp-text-lg: 1.0625rem;
    --fp-text-xl: 1.25rem;

    /* --- radius ---------------------------------------------------------- */
    --fp-radius: 12px;
    --fp-radius-xs: 4px;
    --fp-radius-sm: 8px;
    --fp-radius-md: 10px;
    --fp-radius-lg: 14px;
    --fp-radius-xl: 18px;
    --fp-radius-pill: 999px;

    /* --- elevation ------------------------------------------------------- */
    --fp-shadow-xs: 0 1px 2px rgba(15, 30, 51, .06);
    --fp-shadow-sm: 0 2px 8px rgba(15, 30, 51, .05);
    --fp-shadow:    0 8px 24px rgba(15, 30, 51, .07);
    --fp-shadow-lg: 0 16px 40px rgba(15, 30, 51, .12);

    /* --- motion ---------------------------------------------------------- */
    --fp-transition: 160ms cubic-bezier(.4, 0, .2, 1);

    /* Sidebar geometry is owned by Tabler:
       --tblr-sidebar-width (16rem) and --tblr-sidebar-folded-width (4rem).
       Setting data-bs-sidebar="folded" on <html> swaps them, which also moves
       the page-wrapper margin — see docs/UI.md. */
}

/* Arabic UI: Cairo first, covering Arabic and Latin inside Arabic text. */
html[lang="ar"],
[dir="rtl"] {
    --fp-font-sans-serif: var(--fp-font-ar);
}

@media (prefers-reduced-motion: reduce) {
    :root { --fp-transition: 0ms; }
}

/* ==========================================================================
   Tabler bridge (light theme)
   Tabler 1.6 declares colours with oklch()/light-dark(); we override the
   variable family so every component — buttons, badges, alerts, links, focus
   rings — renders in Fast Print colours without fighting the framework.
   ========================================================================== */
:root {
    --tblr-font-sans-serif: var(--fp-font-en);
    --tblr-font-monospace: var(--fp-font-mono);
    --tblr-body-font-size: var(--fp-text-base);

    --tblr-border-radius: var(--fp-radius);
    --tblr-border-radius-xs: var(--fp-radius-xs);
    --tblr-border-radius-sm: var(--fp-radius-sm);
    --tblr-border-radius-md: var(--fp-radius-md);
    --tblr-border-radius-lg: var(--fp-radius-lg);
    --tblr-border-radius-xl: var(--fp-radius-xl);
    --tblr-border-radius-2xl: var(--fp-radius-xl);
    --tblr-border-radius-pill: var(--fp-radius-pill);

    --tblr-box-shadow-sm: var(--fp-shadow-sm);
    --tblr-box-shadow: var(--fp-shadow);
    --tblr-box-shadow-lg: var(--fp-shadow-lg);

    /* primary */
    --tblr-primary: var(--fp-brand-primary);
    --tblr-primary-rgb: var(--fp-primary-rgb);
    --tblr-primary-fg: #ffffff;
    --tblr-primary-lt: var(--fp-primary-lt);
    --tblr-primary-lt-rgb: 237, 235, 252;
    --tblr-primary-darken: var(--fp-primary-darken);
    --tblr-primary-200: #C9C3F5;
    --tblr-primary-text-emphasis: #4A3CC4;
    --tblr-primary-bg-subtle: var(--fp-primary-lt);
    --tblr-primary-border-subtle: #D8D3F8;

    /* success */
    --tblr-success: var(--fp-brand-success);
    --tblr-success-rgb: var(--fp-success-rgb);
    --tblr-success-fg: #ffffff;
    --tblr-success-lt: var(--fp-success-lt);
    --tblr-success-lt-rgb: 224, 246, 242;
    --tblr-success-darken: var(--fp-success-darken);
    --tblr-success-200: #A8E6D8;
    --tblr-success-text-emphasis: #00795F;
    --tblr-success-bg-subtle: var(--fp-success-lt);
    --tblr-success-border-subtle: #BDE9DF;

    /* warning (dark text on a light surface) */
    --tblr-warning: var(--fp-brand-warning);
    --tblr-warning-rgb: var(--fp-warning-rgb);
    --tblr-warning-fg: #4A3A0A;
    --tblr-warning-lt: var(--fp-warning-lt);
    --tblr-warning-lt-rgb: 255, 246, 229;
    --tblr-warning-darken: var(--fp-warning-darken);
    --tblr-warning-200: #FBE6B8;
    --tblr-warning-text-emphasis: #8A6410;
    --tblr-warning-bg-subtle: var(--fp-warning-lt);
    --tblr-warning-border-subtle: #F8E3B4;

    /* danger */
    --tblr-danger: var(--fp-brand-danger);
    --tblr-danger-rgb: var(--fp-danger-rgb);
    --tblr-danger-fg: #ffffff;
    --tblr-danger-lt: var(--fp-danger-lt);
    --tblr-danger-lt-rgb: 255, 239, 238;
    --tblr-danger-darken: var(--fp-danger-darken);
    --tblr-danger-200: #FFC7C6;
    --tblr-danger-text-emphasis: #C0392B;
    --tblr-danger-bg-subtle: var(--fp-danger-lt);
    --tblr-danger-border-subtle: #FFD5D4;

    /* accent — our own token, also mapped onto Tabler's "info" slot so that
       info badges/alerts pick up the teal instead of Tabler's default blue */
    --tblr-accent: var(--fp-brand-accent);
    --tblr-accent-rgb: var(--fp-accent-rgb);
    --tblr-accent-fg: #04302F;
    --tblr-accent-lt: var(--fp-accent-lt);
    --tblr-accent-lt-rgb: 224, 249, 248;
    --tblr-accent-darken: var(--fp-accent-darken);

    --tblr-info: var(--fp-brand-accent);
    --tblr-info-rgb: var(--fp-accent-rgb);
    --tblr-info-fg: #04302F;
    --tblr-info-lt: var(--fp-accent-lt);
    --tblr-info-lt-rgb: 224, 249, 248;
    --tblr-info-darken: var(--fp-accent-darken);
    --tblr-info-200: #9FEDEB;
    --tblr-info-text-emphasis: #077C79;
    --tblr-info-bg-subtle: var(--fp-accent-lt);
    --tblr-info-border-subtle: #B4F0EE;

    --tblr-link-color: var(--fp-brand-primary);
    --tblr-link-color-rgb: var(--fp-primary-rgb);
    --tblr-link-hover-color: var(--fp-primary-darken);
}

/* ==========================================================================
   Chart tokens (App\Support\Chart)
   Read by the hand-rolled SVG charts so they follow the light/dark switch
   instead of carrying a palette of their own.
   ========================================================================== */
:root {
    --fp-chart-grid:   #E6E8EC;
    --fp-chart-track:  #F1F3F6;
    --fp-chart-axis:   #8A93A5;
    --fp-chart-text:   #14161F;
}

/* ==========================================================================
   Tabler bridge (dark theme)
   Brand hues are lifted for contrast on dark surfaces and the soft tints
   become translucent so they sit correctly over dark cards.
   ========================================================================== */
[data-bs-theme="dark"] {
    --fp-chart-grid:  #2A2F3A;
    --fp-chart-track: #22262F;
    --fp-chart-axis:  #8A93A5;
    --fp-chart-text:  #E8EAF0;

    --fp-primary-lt: rgba(108, 92, 231, .20);
    --fp-accent-lt:  rgba(0, 206, 201, .18);
    --fp-success-lt: rgba(0, 184, 148, .18);
    --fp-warning-lt: rgba(253, 203, 110, .18);
    --fp-danger-lt:  rgba(255, 118, 117, .18);

    --fp-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --fp-shadow-sm: 0 2px 8px rgba(0, 0, 0, .32);
    --fp-shadow:    0 8px 24px rgba(0, 0, 0, .40);
    --fp-shadow-lg: 0 16px 40px rgba(0, 0, 0, .50);

    --tblr-primary: #8B7CF0;
    --tblr-primary-fg: #16121F;
    --tblr-primary-lt: rgba(108, 92, 231, .20);
    --tblr-primary-lt-rgb: 108, 92, 231;
    --tblr-primary-darken: #7A69E8;
    --tblr-primary-200: #4A3F8F;
    --tblr-primary-text-emphasis: #B7ADF7;
    --tblr-primary-bg-subtle: rgba(108, 92, 231, .16);
    --tblr-primary-border-subtle: rgba(108, 92, 231, .38);

    --tblr-success: #2ED3A8;
    --tblr-success-fg: #06251D;
    --tblr-success-lt: rgba(0, 184, 148, .18);
    --tblr-success-lt-rgb: 0, 184, 148;
    --tblr-success-200: #1F6B58;
    --tblr-success-text-emphasis: #7FE3C9;
    --tblr-success-bg-subtle: rgba(0, 184, 148, .16);
    --tblr-success-border-subtle: rgba(0, 184, 148, .38);

    --tblr-warning: #FDD98A;
    --tblr-warning-fg: #2E2405;
    --tblr-warning-lt: rgba(253, 203, 110, .18);
    --tblr-warning-lt-rgb: 253, 203, 110;
    --tblr-warning-200: #7A6428;
    --tblr-warning-text-emphasis: #FBE3AC;
    --tblr-warning-bg-subtle: rgba(253, 203, 110, .16);
    --tblr-warning-border-subtle: rgba(253, 203, 110, .38);

    --tblr-danger: #FF9B9A;
    --tblr-danger-fg: #2E0F0E;
    --tblr-danger-lt: rgba(255, 118, 117, .18);
    --tblr-danger-lt-rgb: 255, 118, 117;
    --tblr-danger-200: #8A3E3D;
    --tblr-danger-text-emphasis: #FFC0BF;
    --tblr-danger-bg-subtle: rgba(255, 118, 117, .16);
    --tblr-danger-border-subtle: rgba(255, 118, 117, .38);

    --tblr-accent: #4FE3DF;
    --tblr-accent-fg: #04302F;
    --tblr-accent-lt: rgba(0, 206, 201, .18);
    --tblr-info: #4FE3DF;
    --tblr-info-fg: #04302F;
    --tblr-info-lt: rgba(0, 206, 201, .18);
    --tblr-info-200: #1F6E6C;
    --tblr-info-text-emphasis: #93F0EE;
    --tblr-info-bg-subtle: rgba(0, 206, 201, .16);
    --tblr-info-border-subtle: rgba(0, 206, 201, .38);

    --tblr-link-color: #A99DF5;
    --tblr-link-hover-color: #C3BAF8;
}