/*
 * The Utility App — Design Tokens (v2)
 * ------------------------------------------------------------
 * Single source of truth for the visual system.
 *
 * Loaded BEFORE Bootstrap so Bootstrap's --bs-* vars cascade
 * naturally; loaded BEFORE per-app stylesheets and _polish.css.
 *
 * Defines:
 *   1. Brand colour ramps
 *   2. Semantic light-mode tokens
 *   3. Semantic dark-mode tokens (via [data-bs-theme="dark"])
 *   4. Bootstrap variable bridges so .text-primary etc. follow the brand
 *   5. Spacing / radius / shadow / motion / typography scales
 *
 * Naming:
 *   --tua-*     The Utility App design tokens (themed)
 *   --bs-*      Bootstrap variable bridges
 * ------------------------------------------------------------
 */

:root {
    /* ─── Brand ramp (Slate–Grey) ─────────────────────────── */
    --tua-brand-50:  #f8fafc;
    --tua-brand-100: #f1f5f9;
    --tua-brand-200: #e2e8f0;
    --tua-brand-300: #cbd5e1;
    --tua-brand-400: #94a3b8;
    --tua-brand-500: #64748b;
    --tua-brand-600: #475569;
    --tua-brand-700: #334155;
    --tua-brand-800: #1e293b;
    --tua-brand-900: #0f172a;

    /* Accent (Cyan/Sky) */
    --tua-accent-400: #38bdf8;
    --tua-accent-500: #0ea5e9;
    --tua-accent-600: #0284c7;

    /* Neutral ramp (slate) */
    --tua-neutral-0:   #ffffff;
    --tua-neutral-50:  #f8fafc;
    --tua-neutral-100: #f1f5f9;
    --tua-neutral-200: #e2e8f0;
    --tua-neutral-300: #cbd5e1;
    --tua-neutral-400: #94a3b8;
    --tua-neutral-500: #64748b;
    --tua-neutral-600: #475569;
    --tua-neutral-700: #334155;
    --tua-neutral-800: #1e293b;
    --tua-neutral-900: #0f172a;
    --tua-neutral-950: #020617;

    /* Status ramps */
    --tua-success-500: #10b981;
    --tua-success-600: #059669;
    --tua-warning-500: #f59e0b;
    --tua-warning-600: #d97706;
    --tua-danger-500:  #ef4444;
    --tua-danger-600:  #dc2626;
    --tua-info-500:    #06b6d4;
    --tua-info-600:    #0891b2;

    /* ─── Light mode semantic tokens ──────────────────────── */
    --tua-bg-base:        #f6f7fb;     /* page background */
    --tua-bg-canvas:      #ffffff;     /* card / surface  */
    --tua-bg-elevated:    #ffffff;     /* modal / dropdown surface */
    --tua-bg-subtle:      #f1f5f9;     /* zebra / hover  */
    --tua-bg-muted:       #e9ecf3;     /* input track    */
    --tua-bg-inverse:     #0f172a;     /* dark surface in light theme */

    --tua-text-primary:   #0f172a;
    --tua-text-secondary: #334155;
    --tua-text-muted:     #64748b;
    --tua-text-faint:     #94a3b8;
    --tua-text-inverse:   #ffffff;
    --tua-text-on-brand:  #ffffff;

    --tua-border-subtle:  #e2e8f0;
    --tua-border-default: #cbd5e1;
    --tua-border-strong:  #94a3b8;

    --tua-link:           #475569;
    --tua-link-hover:     #334155;

    /* Focus ring */
    --tua-focus-ring:     0 0 0 3px rgba(71, 85, 105, 0.35);
    --tua-focus-color:    #475569;

    /* Elevation (subtle, modern) */
    --tua-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --tua-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --tua-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --tua-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
    --tua-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    --tua-shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    --tua-shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.04);

    /* Glow / highlight (brand) */
    --tua-glow-brand:     0 0 0 4px rgba(71, 85, 105, 0.18);

    /* ─── Spacing (4 px base) ─────────────────────────────── */
    --tua-space-0:  0;
    --tua-space-1:  0.25rem;   /*  4px */
    --tua-space-2:  0.5rem;    /*  8px */
    --tua-space-3:  0.75rem;   /* 12px */
    --tua-space-4:  1rem;      /* 16px */
    --tua-space-5:  1.5rem;    /* 24px */
    --tua-space-6:  2rem;      /* 32px */
    --tua-space-7:  3rem;      /* 48px */
    --tua-space-8:  4rem;      /* 64px */
    --tua-space-9:  6rem;      /* 96px */

    /* ─── Radius ──────────────────────────────────────────── */
    --tua-radius-xs:   0.25rem;
    --tua-radius-sm:   0.375rem;
    --tua-radius-md:   0.5rem;
    --tua-radius-lg:   0.75rem;
    --tua-radius-xl:   1rem;
    --tua-radius-2xl:  1.5rem;
    --tua-radius-pill: 9999px;

    /* ─── Typography ──────────────────────────────────────── */
    --tua-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    --tua-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --tua-fs-xs:   0.75rem;
    --tua-fs-sm:   0.875rem;
    --tua-fs-md:   1rem;
    --tua-fs-lg:   1.125rem;
    --tua-fs-xl:   1.25rem;
    --tua-fs-2xl:  1.5rem;
    --tua-fs-3xl:  1.875rem;
    --tua-fs-4xl:  2.25rem;
    --tua-fs-5xl:  3rem;

    --tua-fw-regular:    400;
    --tua-fw-medium:     500;
    --tua-fw-semibold:   600;
    --tua-fw-bold:       700;
    --tua-fw-extrabold:  800;
    --tua-fw-black:      800;

    --tua-lh-tight:  1.2;
    --tua-lh-snug:   1.35;
    --tua-lh-normal: 1.55;
    --tua-lh-loose:  1.75;

    /* Aliases used by some legacy stylesheets */
    --tua-leading-tight:  var(--tua-lh-tight);
    --tua-leading-snug:   var(--tua-lh-snug);
    --tua-leading-normal: var(--tua-lh-normal);
    --tua-leading-loose:  var(--tua-lh-loose);

    --tua-tracking-tight:  -0.015em;
    --tua-tracking-normal: 0;
    --tua-tracking-wide:   0.025em;

    /* ─── Motion ──────────────────────────────────────────── */
    --tua-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --tua-ease-emphasis:  cubic-bezier(0.2, 0.8, 0.2, 1);
    --tua-duration-fast:   120ms;
    --tua-duration-base:   180ms;
    --tua-duration-slow:   280ms;

    --tua-transition-fast:   120ms var(--tua-ease);
    --tua-transition-base:   180ms var(--tua-ease);
    --tua-transition-slow:   280ms var(--tua-ease);
    /* Alias: many existing per-app stylesheets use --tua-transition-normal */
    --tua-transition-normal: var(--tua-transition-base);

    /* ─── Semantic status surface tokens (text + bg on surface) ─ */
    --tua-success-bg:       rgba(16, 185, 129, 0.10);
    --tua-success-border:   rgba(16, 185, 129, 0.30);
    --tua-success-text:     #047857;
    --tua-warning-bg:       rgba(245, 158, 11, 0.10);
    --tua-warning-border:   rgba(245, 158, 11, 0.30);
    --tua-warning-text:     #b45309;
    --tua-danger-bg:        rgba(239, 68, 68, 0.10);
    --tua-danger-border:    rgba(239, 68, 68, 0.30);
    --tua-danger-text:      #b91c1c;
    --tua-info-bg:          rgba(6, 182, 212, 0.10);
    --tua-info-border:      rgba(6, 182, 212, 0.30);
    --tua-info-text:        #0e7490;

    /* ─── Layout ──────────────────────────────────────────── */
    --tua-topbar-height: 64px;
    --tua-footer-height: 56px;
    --tua-content-max:   1320px;
    --tua-page-max:      1200px;
    --tua-content-pad-x: clamp(1rem, 2vw, 1.5rem);

    /* ─── Z-index scale (single source of truth) ───────────
       Replaces magic numbers (1000/1030/1050/2000) that collided
       between dropdowns, modals, drawers and toasts. */
    --tua-z-base:        1;
    --tua-z-raised:      10;
    --tua-z-sticky:      1020;
    --tua-z-topbar:      1030;
    --tua-z-dropdown:    1040;
    --tua-z-popover:     1050;
    --tua-z-drawer:      1060;
    --tua-z-overlay:     1070;
    --tua-z-modal:       1080;
    --tua-z-palette:     1090;
    --tua-z-toast:       1100;
    --tua-z-tooltip:     1110;
    --tua-z-max:         2147483647;

    /* ─── Intent / category colour tokens (chart, calendar,
           project-management, media chips). Each ramp is themable. */
    --tua-cat-1: #38bdf8;   /* sky      */
    --tua-cat-2: #a78bfa;   /* violet   */
    --tua-cat-3: #f472b6;   /* pink     */
    --tua-cat-4: #fb923c;   /* orange   */
    --tua-cat-5: #facc15;   /* amber    */
    --tua-cat-6: #34d399;   /* emerald  */
    --tua-cat-7: #22d3ee;   /* cyan     */
    --tua-cat-8: #f87171;   /* red      */
    --tua-cat-9: #60a5fa;   /* blue     */
    --tua-cat-10:#c084fc;   /* purple   */

    --tua-chart-1: var(--tua-cat-1);
    --tua-chart-2: var(--tua-cat-2);
    --tua-chart-3: var(--tua-cat-3);
    --tua-chart-4: var(--tua-cat-4);
    --tua-chart-5: var(--tua-cat-5);
    --tua-chart-6: var(--tua-cat-6);
    --tua-chart-7: var(--tua-cat-7);
    --tua-chart-8: var(--tua-cat-8);

    /* ─── Spacing aliases (Every-Layout style stack/cluster) ── */
    --tua-space-xs: var(--tua-space-1);
    --tua-space-sm: var(--tua-space-2);
    --tua-space-md: var(--tua-space-4);
    --tua-space-lg: var(--tua-space-5);
    --tua-space-xl: var(--tua-space-6);
    --tua-space-2xl: var(--tua-space-7);

    /* ─── Semantic colour aliases (kept for back-compat) ───── */
    --tua-color-bg:        var(--tua-bg-canvas);
    --tua-color-surface:   var(--tua-bg-subtle);
    --tua-color-text:      var(--tua-text-primary);
    --tua-color-muted:     var(--tua-text-muted);
    --tua-color-border:    var(--tua-border-subtle);
    --tua-color-primary:   var(--tua-brand-600);
    --tua-color-success:   var(--tua-success-600);
    --tua-color-warning:   var(--tua-warning-600);
    --tua-color-danger:    var(--tua-danger-600);
    --tua-font-base:       var(--tua-font-sans);
    --tua-font-size-sm:    var(--tua-fs-sm);
    --tua-font-size-md:    var(--tua-fs-md);
    --tua-font-size-lg:    var(--tua-fs-lg);
    --tua-line-height-tight: var(--tua-lh-snug);
    --tua-line-height-base:  var(--tua-lh-normal);
}

/* ─── Bootstrap variable bridges (LIGHT) ─────────────────────
   Aligns Bootstrap components to the design system so
   .btn-primary / .text-primary / .bg-body etc. all use brand.
   ─────────────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
    --bs-primary:        var(--tua-brand-600);
    --bs-primary-rgb:    71, 85, 105;
    --bs-link-color:     var(--tua-link);
    --bs-link-color-rgb: 71, 85, 105;
    --bs-link-hover-color: var(--tua-link-hover);

    --bs-body-bg:           var(--tua-bg-base);
    --bs-body-color:        var(--tua-text-primary);
    --bs-body-color-rgb:    15, 23, 42;
    --bs-secondary-color:   var(--tua-text-muted);
    --bs-tertiary-bg:       var(--tua-bg-subtle);
    --bs-tertiary-color:    var(--tua-text-faint);
    --bs-border-color:      var(--tua-border-subtle);
    --bs-border-color-translucent: rgba(15, 23, 42, 0.10);
    --bs-card-bg:           var(--tua-bg-canvas);
    --bs-card-cap-bg:       var(--tua-bg-canvas);
    --bs-card-border-color: var(--tua-border-subtle);
    --bs-emphasis-color:    var(--tua-text-primary);

    --bs-success: var(--tua-success-600);
    --bs-danger:  var(--tua-danger-600);
    --bs-warning: var(--tua-warning-600);
    --bs-info:    var(--tua-info-600);

    --bs-font-sans-serif: var(--tua-font-sans);

    color-scheme: light;
}

/* ─── Dark mode token overrides ─────────────────────────── */
html[data-bs-theme="dark"],
[data-bs-theme="dark"] {
    /* Surfaces: a single consistent neutral-slate ramp.
       Each level is *clearly* distinct so layered surfaces never
       blend into one another. */
    --tua-bg-base:        #0f1115;     /* page background       */
    --tua-bg-canvas:      #181b21;     /* card / surface        */
    --tua-bg-elevated:    #1e222a;     /* modal / dropdown      */
    --tua-bg-subtle:      #252930;     /* hover / zebra         */
    --tua-bg-muted:       #2c3038;     /* inputs / inset tracks */
    --tua-bg-inverse:     #e2e8f0;

    --tua-text-primary:   #e6ecf5;
    --tua-text-secondary: #c2cce0;
    --tua-text-muted:     #94a3b8;
    --tua-text-faint:     #64748b;
    --tua-text-inverse:   #0f172a;
    --tua-text-on-brand:  #ffffff;

    --tua-border-subtle:  rgba(148, 163, 184, 0.14);
    --tua-border-default: rgba(148, 163, 184, 0.24);
    --tua-border-strong:  rgba(148, 163, 184, 0.42);

    --tua-link:           #94a3b8;
    --tua-link-hover:     #cbd5e1;

    --tua-focus-ring:     0 0 0 3px rgba(148, 163, 184, 0.45);
    --tua-focus-color:    #94a3b8;

    /* Shadows are darker / deeper in dark mode */
    --tua-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --tua-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --tua-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
    --tua-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
    --tua-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.60), 0 8px 10px -6px rgba(0, 0, 0, 0.40);
    --tua-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.80);
    --tua-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.30);

    --tua-glow-brand: 0 0 0 4px rgba(148, 163, 184, 0.30);

    /* Semantic status surfaces (dark) */
    --tua-success-bg:     rgba(16, 185, 129, 0.16);
    --tua-success-border: rgba(16, 185, 129, 0.40);
    --tua-success-text:   #6ee7b7;
    --tua-warning-bg:     rgba(245, 158, 11, 0.16);
    --tua-warning-border: rgba(245, 158, 11, 0.40);
    --tua-warning-text:   #fcd34d;
    --tua-danger-bg:      rgba(239, 68, 68, 0.18);
    --tua-danger-border:  rgba(239, 68, 68, 0.42);
    --tua-danger-text:    #fca5a5;
    --tua-info-bg:        rgba(6, 182, 212, 0.18);
    --tua-info-border:    rgba(6, 182, 212, 0.42);
    --tua-info-text:      #67e8f9;

    /* Bootstrap bridges (DARK) */
    --bs-primary:        #94a3b8;
    --bs-primary-rgb:    148, 163, 184;
    --bs-link-color:     #94a3b8;
    --bs-link-color-rgb: 148, 163, 184;
    --bs-link-hover-color: #cbd5e1;

    --bs-body-bg:        var(--tua-bg-base);
    --bs-body-color:     var(--tua-text-primary);
    --bs-body-color-rgb: 230, 236, 245;
    --bs-secondary-color: var(--tua-text-muted);
    --bs-tertiary-bg:    var(--tua-bg-subtle);
    --bs-tertiary-color: var(--tua-text-faint);
    --bs-border-color:   var(--tua-border-subtle);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.10);
    --bs-card-bg:        var(--tua-bg-canvas);
    --bs-card-cap-bg:    var(--tua-bg-canvas);
    --bs-card-border-color: var(--tua-border-subtle);
    --bs-emphasis-color: var(--tua-text-primary);

    color-scheme: dark;
}

/* ─── Reduced motion: respect user preference ────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --tua-transition-fast: 0ms;
        --tua-transition-base: 0ms;
        --tua-transition-slow: 0ms;
        --tua-duration-fast:   0ms;
        --tua-duration-base:   0ms;
        --tua-duration-slow:   0ms;
    }
    /* Strip any per-app keyframe / transition that bypasses the
       transition tokens. Honours item §4 of the audit globally. */
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Optional manual override (toggle from profile preferences). */
html[data-tua-motion="reduce"] *,
html[data-tua-motion="reduce"] *::before,
html[data-tua-motion="reduce"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* High-contrast theme — additive layer over light/dark. */
html[data-tua-contrast="high"] {
    --tua-border-subtle:  #000000;
    --tua-border-default: #000000;
    --tua-border-strong:  #000000;
    --tua-text-muted:     #1f2937;
    --tua-text-faint:     #334155;
    --tua-focus-ring:     0 0 0 4px #fbbf24;
}
html[data-tua-contrast="high"][data-bs-theme="dark"] {
    --tua-border-subtle:  #ffffff;
    --tua-border-default: #ffffff;
    --tua-border-strong:  #ffffff;
    --tua-text-muted:     #f1f5f9;
    --tua-text-faint:     #e2e8f0;
    --tua-focus-ring:     0 0 0 4px #fde68a;
}