/**
 * Teamspace design tokens — single source of truth.
 *
 * Values: teamspace/templates/base.html.twig `:root` (2026-09).
 * Names:  workbase groups (--c- / --s- / --t- / --sp- / --fs-) plus
 *         teamspace flat aliases (--primary, --text-strong, …) so Twig
 *         copies (edu, ats, lms, goal) drop in without renaming markup.
 *
 * Header is 56px. Do not copy the 48px drift from edu/ats/lms/goal.
 */

:root {
    /* ── Colour ─────────────────────────────────────────────────────────── */
    --c-accent-50:  #e9f2ff;
    --c-accent-100: #d6e4ff;
    --c-accent-200: #4c9aff;
    --c-accent-300: #4c9aff;
    --c-accent-400: #2684ff;
    --c-accent-500: #0052cc;
    --c-accent-600: #0747a6;
    --c-accent-700: #063179;

    --c-danger-50:  #ffebe6;
    --c-danger-100: #ffbdad;
    --c-danger-500: #de350b;
    --c-danger-600: #bf2600;

    --c-success-50:  #e3fcef;
    --c-success-100: #abf5d1;
    --c-success-500: #00875a;
    --c-success-600: #006644;

    --c-warning-50:  #fffae6;
    --c-warning-100: #fff0b3;
    --c-warning-500: #ff991f;
    --c-warning-600: #ff8b00;

    --c-info-50:  #e9f2ff;
    --c-info-100: #d6e4ff;
    --c-info-500: #0052cc;

    --c-canvas: #f7f8f9;
    --c-surface: #ffffff;
    --c-surface-hover: #f1f2f4;
    --c-surface-sunken: #f1f2f4;

    /* ── Surfaces (workbase names) ──────────────────────────────────────── */
    --s-page:        #f7f8f9;
    --s-surface:     #ffffff;
    --s-raised:      #f7f8f9;
    --s-sunken:      #f1f2f4;
    --s-hover:       #f1f2f4;
    --s-active:      #e9f2ff;
    --s-border:      #e3e5e8;
    --s-border-soft: #eceef1;

    --s-header-bg:    #0052cc;
    --s-header-text:  #ffffff;
    --s-header-hover: rgba(255, 255, 255, 0.16);
    --s-header-text-muted: rgba(255, 255, 255, 0.8);
    --s-header-item-hover: rgba(255, 255, 255, 0.16);

    --s-sidebar-bg:     #ffffff;
    --s-sidebar-border: #eceef1;
    --s-sidebar-text:   #44546f;
    --s-sidebar-text-muted: #626f86;
    --s-sidebar-item-hover: #f1f2f4;
    --s-sidebar-item-active: #e9f2ff;
    --s-sidebar-hover:  #f1f2f4;

    /* ── Text ───────────────────────────────────────────────────────────── */
    --t-strong:    #091e42;
    --t-primary:   #172b4d;
    --t-default:   #172b4d;
    --t-secondary: #44546f;
    --t-muted:     #626f86;
    --t-faint:     #8993a4;
    --t-inverse:   #ffffff;
    --t-accent:    #0052cc;

    /* ── Type ───────────────────────────────────────────────────────────── */
    --font:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-sans: var(--font);
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 24px;

    --text-xs: var(--fs-xs);
    --text-sm: var(--fs-sm);
    --text-md: var(--fs-md);
    --text-lg: var(--fs-lg);
    --text-xl: var(--fs-xl);
    --text-2xl: var(--fs-2xl);

    --lh-tight: 1.25;
    --lh-normal: 1.42857;
    --leading-tight: var(--lh-tight);
    --leading-normal: var(--lh-normal);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ── Spacing (4px base) ─────────────────────────────────────────────── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;

    /* ── Radius ─────────────────────────────────────────────────────────── */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-full: 999px;

    /* ── Elevation ──────────────────────────────────────────────────────── */
    --e-1: 0 1px 2px rgba(9, 30, 66, 0.08);
    --e-2: 0 4px 8px -2px rgba(9, 30, 66, 0.18), 0 0 1px rgba(9, 30, 66, 0.28);
    --e-3: 0 12px 32px rgba(15, 23, 42, 0.16);
    --shadow-sm: var(--e-1);
    --shadow-md: var(--e-2);
    --shadow-lg: var(--e-3);
    --shadow-card: var(--e-1);
    --shadow-raised: var(--e-2);

    /* ── Layout ─────────────────────────────────────────────────────────── */
    --h-header: 56px;
    --w-sidebar: 260px;
    --w-sidebar-collapsed: 56px;

    --z-header: 100;
    --z-sidebar: 90;
    --z-dropdown: 110;
    --z-modal: 200;

    --focus-ring: 0 0 0 2px var(--s-surface), 0 0 0 4px var(--c-accent-500);
    --motion-fast: 150ms;
    --motion-base: 200ms;
    --easing: cubic-bezier(0.2, 0, 0.2, 1);

    /* ── Teamspace / Twig aliases ───────────────────────────────────────── */
    --bg: var(--s-page);
    --surface: var(--s-surface);
    --surface-hover: var(--s-hover);
    --surface-sunken: var(--s-sunken);
    --surface-raised: var(--s-raised);

    --border: var(--s-border);
    --border-subtle: var(--s-border-soft);

    --text: var(--t-primary);
    --text-strong: var(--t-strong);
    --text-muted: var(--t-muted);
    --text-faint: var(--t-faint);

    --primary: var(--c-accent-500);
    --primary-hover: var(--c-accent-600);
    --primary-active: var(--c-accent-700);
    --primary-soft: var(--c-accent-50);
    --primary-soft-text: var(--c-accent-600);

    --danger: var(--c-danger-500);
    --danger-hover: var(--c-danger-600);
    --danger-soft: var(--c-danger-50);
    --danger-soft-text: var(--c-danger-600);

    --success: var(--c-success-500);
    --success-soft: var(--c-success-50);
    --success-soft-text: var(--c-success-600);

    --warning: var(--c-warning-500);
    --warning-soft: var(--c-warning-50);
    --warning-soft-text: #974f0c;

    --info: var(--c-info-500);
    --info-soft: var(--c-info-50);
    --info-soft-text: var(--c-accent-600);

    --header-bg: var(--s-header-bg);
    --header-text: var(--s-header-text);
    --header-text-muted: var(--s-header-text-muted);
    --header-item-hover: var(--s-header-item-hover);
    --header-hover: var(--s-header-hover);
    --header-height: var(--h-header);

    --sidebar-bg: var(--s-sidebar-bg);
    --sidebar-bg-hover: var(--s-sidebar-item-hover);
    --sidebar-border: var(--s-sidebar-border);
    --sidebar-text: var(--s-sidebar-text);
    --sidebar-text-muted: var(--s-sidebar-text-muted);
    --sidebar-item-hover: var(--s-sidebar-item-hover);
    --sidebar-item-active: var(--s-sidebar-item-active);
    --sidebar-active-bg: var(--s-sidebar-item-active);
    --sidebar-active-text: var(--c-accent-500);
    --sidebar-width: var(--w-sidebar);
    --sidebar-collapsed-width: var(--w-sidebar-collapsed);

    --radius-sm: var(--r-sm);
    --radius: var(--r-md);
    --radius-lg: var(--r-lg);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}