/**
 * Hub Brand — shared design tokens
 *
 * Single source of truth for both `hub` (desktop) and `hub_mobile` templates.
 *
 * This file holds only STATIC tokens: spacing, radius, shadows, transitions,
 * semantic colours and the type stack. Everything derived from the template
 * style params — the primary colour family, gradients, surfaces, dark-mode
 * overrides — is injected at runtime by HubBrand::cssVars(), which is emitted
 * AFTER this file and therefore wins.
 *
 * Do not hardcode a brand colour here. If you need one, it belongs in the
 * template style params so both templates and the PWA manifest agree.
 *
 * @package     Hub Brand
 * @copyright   (C) 2026 Oui.onl. All rights reserved.
 * @license     GPL-2.0-or-later
 */

:root {
    /* ------------------------------------------------------------------
       Fallback brand colours

       These exist so a page still renders sanely if cssVars() is missing
       (a raw component.php hit, a cached stylesheet, a misconfigured style).
       HubBrand::cssVars() overrides every one of them.
       ------------------------------------------------------------------ */
    --hub-primary: #3a979e;
    --hub-primary-light: #4fb8c0;
    --hub-primary-dark: #2d757a;
    --hub-secondary: #3a6f9e;
    --hub-on-primary: #ffffff;

    --hub-bg: #f1efe9;
    --hub-surface: #ffffff;
    --hub-surface-secondary: #f8fafc;

    --hub-text: #1e293b;
    --hub-text-secondary: #64748b;
    --hub-text-muted: #94a3b8;

    --hub-border: #e2e8f0;
    --hub-border-light: rgba(255, 255, 255, 0.2);

    /* ------------------------------------------------------------------
       Semantic colours — fixed, not brand-derived.
       Success/warning/danger must stay recognisable whatever the brand is.
       ------------------------------------------------------------------ */
    --hub-success: #10b981;
    --hub-success-dark: #059669;
    --hub-warning: #f59e0b;
    --hub-warning-dark: #d97706;
    --hub-danger: #ef4444;
    --hub-danger-dark: #dc2626;
    --hub-info: #3b82f6;
    --hub-info-dark: #1d4ed8;

    /* rgb triplets, so a view can build its own rgba() tint from a semantic
       colour instead of re-typing the hex. --hub-primary-rgb is emitted by
       HubBrand::cssVars() because it follows the brand. */
    --hub-success-rgb: 16, 185, 129;
    --hub-warning-rgb: 245, 158, 11;
    --hub-danger-rgb: 239, 68, 68;
    --hub-info-rgb: 59, 130, 246;

    /* ------------------------------------------------------------------
       Spacing scale
       ------------------------------------------------------------------ */
    --hub-space-1: 0.25rem;
    --hub-space-2: 0.5rem;
    --hub-space-3: 1rem;
    --hub-space-4: 1.5rem;
    --hub-space-5: 2rem;
    --hub-space-6: 3rem;

    /* ------------------------------------------------------------------
       Layout
       ------------------------------------------------------------------ */
    --hub-sidebar-width: 16%;
    --hub-sidebar-width-px: 260px;
    --hub-header-height: 0;

    /* Mobile shell — consumed by hub_mobile, declared here so both
       templates measure the same chrome. */
    --hub-topbar-height: 56px;
    --hub-tabbar-height: 56px;
    --hub-safe-top: env(safe-area-inset-top, 0px);
    --hub-safe-bottom: env(safe-area-inset-bottom, 0px);
    --hub-safe-left: env(safe-area-inset-left, 0px);
    --hub-safe-right: env(safe-area-inset-right, 0px);
    --hub-tap-target: 44px;

    /* ------------------------------------------------------------------
       Elevation
       ------------------------------------------------------------------ */
    --hub-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --hub-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --hub-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --hub-shadow-glass: 0 8px 32px rgba(31, 38, 135, 0.15);

    /* ------------------------------------------------------------------
       Border radius
       ------------------------------------------------------------------ */
    --hub-radius-sm: 0.5rem;
    --hub-radius: 1rem;
    --hub-radius-lg: 1.5rem;
    --hub-radius-xl: 2rem;
    --hub-radius-full: 9999px;

    /* ------------------------------------------------------------------
       Motion
       ------------------------------------------------------------------ */
    --hub-transition: all 0.2s ease;
    --hub-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --hub-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ------------------------------------------------------------------
       Glass effect
       ------------------------------------------------------------------ */
    --hub-glass-bg: rgba(255, 255, 255, 0.8);
    --hub-glass-border: rgba(255, 255, 255, 0.2);
    --hub-backdrop-blur: blur(12px);

    /* ------------------------------------------------------------------
       Typography

       --hub-font-sans is overridden by cssVars() when the googleFont param
       is set. The stack below is the fallback and the tail of that override.
       ------------------------------------------------------------------ */
    --hub-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hub-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    /* ------------------------------------------------------------------
       z-index scale — keeps the mobile shell, sheets and the accessibility
       widget from fighting each other.
       ------------------------------------------------------------------ */
    --hub-z-sidebar: 1030;
    --hub-z-topbar: 1035;
    --hub-z-tabbar: 1040;
    --hub-z-overlay: 1045;
    --hub-z-sheet: 1050;
    --hub-z-toast: 1060;
}

/* ----------------------------------------------------------------------
   Dark mode fallbacks

   As above: cssVars() emits the real values from the darkMode params and
   overrides these. Kept so an uninjected page is still legible.
   ---------------------------------------------------------------------- */
[data-theme="dark"] {
    --hub-bg: #0f172a;
    --hub-surface: #1e293b;
    --hub-surface-secondary: #172033;
    --hub-sidebar-bg: #1e293b;
    --hub-text: #f1f5f9;
    --hub-text-secondary: #94a3b8;
    --hub-text-muted: #64748b;
    --hub-border: #334155;
    --hub-glass-bg: rgba(30, 41, 59, 0.8);
    --hub-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------------------------
   Motion preference — applies to both templates.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --hub-transition: none;
        --hub-transition-slow: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}