/* ==========================================================================
   TableTap design tokens - single source of truth (`--tt-*` namespace).
   Plain CSS custom properties, no build step.

   Theming: light values live on `:root`; dark values live under
   `html[data-bs-theme="dark"]` (set by the inline script in both layouts
   and toggled by wwwroot/js/theme.js - do not change that mechanism).

   Breakpoint convention (mobile-first - base styles target small screens):
     base              → phones (0 … 767.98px)
     @media (min-width: 768px)  → tablets and up
     @media (min-width: 1280px) → desktop and up
   Bootstrap's own breakpoints (576/768/992/1200) still apply to Bootstrap
   grid/utilities; the 768 / 1280 pair above is the TableTap component
   convention used by app.css.
   ========================================================================== */

:root {
    /* ---- Brand palette (light) ---- */
    --tt-color-primary: #2563eb;
    --tt-color-primary-hover: #1d4ed8;
    --tt-color-primary-active: #1e40af;
    --tt-color-primary-contrast: #ffffff;
    --tt-color-primary-subtle: #ecf1fe;
    --tt-color-accent: #b78a2e; /* brass, echoes the brand mark */

    /* ---- Surfaces & text (light) ---- */
    --tt-color-bg: #f6f7f9;
    --tt-color-surface: #ffffff;
    --tt-color-surface-raised: #ffffff;
    --tt-color-surface-sunken: #eef0f3;
    --tt-color-text: #1c2430;
    --tt-color-text-muted: #5d6878;
    --tt-color-text-subtle: #8a93a3;
    --tt-color-border: #dde2e9;
    --tt-color-border-strong: #c3cbd6;

    /* ---- Semantic (light) ---- */
    --tt-color-success: #177a4c;
    --tt-color-success-subtle: #e2f5ea;
    --tt-color-warning: #a05c07;
    --tt-color-warning-subtle: #fdf0da;
    --tt-color-danger: #c4362c;
    --tt-color-danger-contrast: #ffffff;
    --tt-color-danger-subtle: #fdeceb;
    --tt-color-info: #0f6d8a;
    --tt-color-info-subtle: #e2f2f8;

    /* ---- Focus ---- */
    --tt-color-focus-ring: rgba(37, 99, 235, 0.35);

    /* ---- Spacing scale ---- */
    --tt-space-1: 0.25rem;
    --tt-space-2: 0.5rem;
    --tt-space-3: 0.75rem;
    --tt-space-4: 1rem;
    --tt-space-5: 1.5rem;
    --tt-space-6: 2rem;
    --tt-space-7: 3rem;
    --tt-space-8: 4rem;

    /* ---- Radius ---- */
    --tt-radius-sm: 0.375rem;
    --tt-radius-md: 0.625rem;
    --tt-radius-lg: 0.875rem;
    --tt-radius-pill: 999px;

    /* ---- Shadows ---- */
    --tt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --tt-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
    --tt-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);

    /* ---- Typography ---- */
    --tt-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --tt-font-size-xs: 0.75rem;
    --tt-font-size-sm: 0.875rem;
    --tt-font-size-base: 1rem;
    --tt-font-size-lg: 1.125rem;
    --tt-font-size-xl: 1.25rem;
    --tt-font-size-2xl: 1.5rem;
    --tt-font-size-3xl: 1.875rem;
    --tt-font-weight-normal: 400;
    --tt-font-weight-medium: 500;
    --tt-font-weight-semibold: 600;
    --tt-font-weight-bold: 700;
    --tt-line-height-tight: 1.25;
    --tt-line-height-normal: 1.5;
    --tt-line-height-relaxed: 1.65;

    /* ---- Layout ---- */
    --tt-content-max-width: 72rem;
    --tt-topbar-height: 4rem; /* customer-order.js derives its sticky offset from 4rem - keep in sync */
    --tt-touch-target-min: 44px; /* fixed px: rem would shrink to 38.5px at the 14px mobile root font-size */

    /* ---- z-index scale (aligned with Bootstrap's scale) ---- */
    --tt-z-dropdown: 1000;
    /* ---- Notion-style flat surfaces (staff/backoffice reskin) ---- */
    --notion-border: #e5e7eb;
    --notion-border-strong: #d4d7dd;
    --notion-muted: #6b7280;
    --notion-muted-bg: #f7f7f5;
    --notion-card-bg: #ffffff;
    --notion-radius: 8px;
    --notion-row-height: 44px;
    --notion-pill-pending-bg: #fbf3db;
    --notion-pill-ready-bg: #e3f0fc;
    --notion-pill-done-bg: #e6f4ea;
    --notion-pill-danger-bg: #fdecea;
    --notion-sidebar-bg: #f7f7f5;
    --notion-sidebar-active-bg: #ececea;
    --notion-shadow: none;
    --tt-z-sticky: 1020;
    --tt-z-fixed: 1030;
    --tt-z-topbar: 1030;
    --tt-z-bottom-nav: 1040;
    --tt-z-modal: 1050;
    --tt-z-toast: 1080;

    /* ======================================================================
       Bootstrap bridge - stock Bootstrap components inherit the brand.
       ====================================================================== */
    --bs-body-font-family: var(--tt-font-family);
    --bs-body-bg: var(--tt-color-bg);
    --bs-body-color: var(--tt-color-text);
    --bs-emphasis-color: var(--tt-color-text);
    --bs-secondary-color: var(--tt-color-text-muted);
    --bs-tertiary-bg: var(--tt-color-surface-sunken);
    --bs-tertiary-bg-rgb: 238, 240, 243; /* --tt-color-surface-sunken #eef0f3 */
    --bs-border-color: var(--tt-color-border);
    --bs-border-radius: var(--tt-radius-md);
    --bs-link-color: var(--tt-color-primary);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--tt-color-primary-hover);
    --bs-link-hover-color-rgb: 29, 78, 216;
    --bs-primary: var(--tt-color-primary);
    --bs-primary-rgb: 37, 99, 235;
    --bs-success: var(--tt-color-success);
    --bs-success-rgb: 23, 122, 76;
    --bs-warning: #d9820b;
    --bs-warning-rgb: 217, 130, 11;
    --bs-danger: var(--tt-color-danger);
    --bs-danger-rgb: 196, 54, 44;
    --bs-info: var(--tt-color-info);
    --bs-info-rgb: 15, 109, 138;
}

/* ---- Dark theme (driven by html[data-bs-theme="dark"] from theme.js) ---- */
html[data-bs-theme="dark"] {
    --tt-color-primary: #7ba3f5;
    --tt-color-primary-hover: #9dbcf8;
    --tt-color-primary-active: #b8cff9;
    --tt-color-primary-contrast: #0d1b33;
    --tt-color-primary-subtle: #1c2c4a;
    --tt-color-accent: #d9b45f;

    --tt-color-bg: #12161d;
    --tt-color-surface: #1a2029;
    --tt-color-surface-raised: #212834;
    --tt-color-surface-sunken: #0e1218;
    --tt-color-text: #e8ecf2;
    --tt-color-text-muted: #a5aebc;
    --tt-color-text-subtle: #78828f;
    --tt-color-border: #2c3542;
    --tt-color-border-strong: #3d4756;

    --tt-color-success: #5ac794;
    --tt-color-success-subtle: #14342a;
    --tt-color-warning: #e8b04b;
    --tt-color-warning-subtle: #3a2d12;
    --tt-color-danger: #f0776c;
    --tt-color-danger-contrast: #1c2430; /* dark text on the lightened dark-theme danger (5.6:1) */
    --tt-color-danger-subtle: #3d1a17;
    --tt-color-info: #5cc0d8;
    --tt-color-info-subtle: #12303a;

    --tt-color-focus-ring: rgba(123, 163, 245, 0.45);

    --tt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --tt-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --tt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);

    /* Notion-style flat surfaces (dark overrides) */
    --notion-border: #2c3542;
    --notion-border-strong: #3d4756;
    --notion-muted: #a5aebc;
    --notion-muted-bg: #161b22;
    --notion-card-bg: #1a2029;
    --notion-pill-pending-bg: #3a2d12;
    --notion-pill-ready-bg: #12303a;
    --notion-pill-done-bg: #14342a;
    --notion-pill-danger-bg: #3d1a17;
    --notion-sidebar-bg: #161b22;
    --notion-sidebar-active-bg: #212834;

    /* Bootstrap bridge (dark) */
    --bs-tertiary-bg-rgb: 14, 18, 24; /* --tt-color-surface-sunken #0e1218 */
    --bs-link-color-rgb: 123, 163, 245;
    --bs-link-hover-color-rgb: 157, 188, 248;
    --bs-primary-rgb: 123, 163, 245;
    --bs-success-rgb: 90, 199, 148;
    --bs-warning-rgb: 232, 176, 75;
    --bs-danger-rgb: 240, 119, 108;
    --bs-info-rgb: 92, 192, 216;
}