/* ============================================================
   Scattify Design Tokens (Phase 1.1)
   Canonical token layer. This file must load BEFORE style.css
   and any other application stylesheet.

   Rules:
   - All shared design tokens live in this single :root block.
   - New component work must consume semantic tokens (--color-*,
     --font-*, --space-*, --radius-*, --shadow-*, --motion-*, --z-*)
     rather than hardcoded values.
   - Legacy variable names are preserved below as aliases so that
     existing selectors keep resolving; new code must not use them.

   Breakpoint convention (CSS custom properties cannot be used in
   media queries). Scattify standardises on the Bootstrap 5 set:
     min-width:  576px (sm)   768px (md)   992px (lg)
                 1200px (xl)  1400px (xxl)  1680px (ultra-wide, PXR-5)
     max-width:  575.98px     767.98px     991.98px    1199.98px
   The authenticated sidebar collapses below 992px (lg).
   1680px exists solely for adaptive container max-widths on large
   monitors (PXR-5). Do not introduce other breakpoint values in new rules.
   ============================================================ */

:root {
    /* ---------- Layout: adaptive container widths (PXR-5) ----------
       Consumed by .page-container variants in style.css. Containers
       step up with the viewport so desktop space is used purposefully:
       md ≈ 13" laptops, lg ≈ 15–16" laptops, xl/max ≈ large monitors. */
    --layout-width-focused: 860px;
    --layout-width-md: 1080px;
    --layout-width-lg: 1200px;
    --layout-width-xl: 1320px;
    --layout-width-max: 1440px;

    /* ---------- Colour: semantic roles (approved palette) ---------- */
    --color-primary: #2563EB;
    --color-primary-strong: #1D4ED8;
    --color-primary-deep: #1E3A8A;
    --color-primary-soft: #BFDBFE;
    --color-primary-faint: #EFF6FF;
    --color-secondary: #0EA5E9;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #0284C7;
    --color-neutral: #64748B;

    /* ---------- Colour: text roles ---------- */
    --color-text-primary: #0F172A;
    --color-text-secondary: #334155;
    /* Muted text corrected in P1.1: was #64748B (4.34:1 on #F1F5F9,
       below WCAG AA). #475569 is the nearest approved neutral and
       meets AA on all light surfaces (6.92:1 worst case). */
    --color-text-muted: #475569;
    --color-text-faint: #94A3B8;   /* decorative only — fails AA; see docs */
    --color-text-inverse: #FFFFFF;

    /* ---------- Colour: surfaces and structure ---------- */
    --color-bg-page: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-sunken: #F1F5F9;
    --color-surface-hover: #EEF2F7;
    --color-bg-dark: #0F172A;
    --color-border: #E2E8F0;
    --color-border-strong: #CBD5E1;
    --color-focus: #2563EB;
    --color-disabled-bg: #F1F5F9;
    --color-disabled-text: #94A3B8;

    /* ---------- Typography ---------- */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-body: 1rem;          /* 16px */
    --font-size-sm: 0.875rem;        /* supporting text */
    --font-size-xs: 0.75rem;         /* metadata */
    --font-size-component-heading: 1.125rem;
    --font-size-section-heading: 1.375rem;
    --font-size-page-title: 1.75rem;
    --line-height-body: 1.7;
    --line-height-heading: 1.2;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;

    /* ---------- Spacing scale ---------- */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */

    /* ---------- Shape ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-control: 10px;          /* app controls/cards (was --app-radius) */
    --control-height: 38px;
    --border-width: 1px;

    /* ---------- Elevation ---------- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 60px rgba(37, 99, 235, 0.3);
    --shadow-glow-blue: 0 0 60px rgba(14, 165, 233, 0.25);
    --shadow-card-sm: 0 1px 2px rgba(15, 23, 42, 0.05);   /* was --app-shadow-sm */
    --shadow-card-md: 0 4px 12px rgba(15, 23, 42, 0.08);  /* was --app-shadow-md */

    /* ---------- Motion (existing values, centralised) ---------- */
    --motion-fast: 0.15s;
    --motion-standard: 0.2s;
    --motion-slow: 0.3s;
    --ease-standard: ease;
    --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Layering (mapped from current values) ---------- */
    --z-base: 1;
    --z-nav: 1000;          /* public sticky navbar */
    --z-sticky: 1030;       /* app mobile topbar (Bootstrap sticky tier) */
    --z-dropdown: 1000;     /* Bootstrap default */
    --z-overlay: 1040;      /* Bootstrap offcanvas/backdrop tier */
    --z-modal: 1055;        /* Bootstrap default */
    --z-toast: 1090;        /* Bootstrap default */
    --z-skip-link: 2000;    /* skip-to-content link */

    /* ---------- Gradients (approved, unchanged) ---------- */
    --gradient-primary: linear-gradient(135deg, #1E3A8A 0%, #2563EB 50%, #3B82F6 100%);
    --gradient-hero: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 50%, #2563EB 100%);
    --gradient-card: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(14, 165, 233, 0.05) 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(37, 99, 235, 0.15) 0px, transparent 50%),
                     radial-gradient(at 80% 0%, rgba(30, 58, 138, 0.1) 0px, transparent 50%),
                     radial-gradient(at 0% 50%, rgba(14, 165, 233, 0.1) 0px, transparent 50%),
                     radial-gradient(at 80% 50%, rgba(59, 130, 246, 0.1) 0px, transparent 50%),
                     radial-gradient(at 0% 100%, rgba(37, 99, 235, 0.1) 0px, transparent 50%);

    /* ============================================================
       Legacy aliases — DO NOT use in new code.
       Kept so existing selectors keep resolving; each points at the
       canonical token above. Removal is scheduled with P1.3 selector
       cleanup once consumers are migrated.
       ============================================================ */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-deep);
    --primary-light: var(--color-primary-soft);
    --primary-50: var(--color-primary-faint);
    --secondary: var(--color-secondary);
    --accent: var(--color-info);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-error);
    --navy-blue: var(--color-primary-deep);

    --text-dark: var(--color-text-primary);
    --text-body: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-light: var(--color-text-faint);

    --bg-white: var(--color-surface);
    --bg-light: var(--color-bg-page);
    --bg-gray: var(--color-surface-sunken);
    --bg-dark: var(--color-bg-dark);

    --border-light: var(--color-border);
    --border-medium: var(--color-border-strong);

    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-xl);

    /* App shell (Experience 2.0) aliases */
    --app-background: var(--color-bg-page);
    --app-surface: var(--color-surface);
    --app-border: var(--color-border);
    --app-text: var(--color-text-primary);
    --app-text-muted: var(--color-text-muted);
    --app-text-faint: var(--color-text-faint);
    --app-brand: var(--color-primary);
    --app-brand-strong: var(--color-primary-strong);
    --app-hover: var(--color-surface-hover);
    --app-radius: var(--radius-control);
    --app-radius-sm: var(--radius-sm);
    --app-shadow-sm: var(--shadow-card-sm);
    --app-shadow-md: var(--shadow-card-md);
    --app-control-height: var(--control-height);

    /* Sidebar aliases (light sidebar) */
    --sidebar-background: var(--color-bg-page);
    --sidebar-surface: var(--color-surface);
    --sidebar-text: #475569;
    --sidebar-text-strong: var(--color-text-primary);
    --sidebar-muted: var(--color-text-muted);
    --sidebar-icon: var(--color-neutral);
    --sidebar-hover-background: var(--color-surface-hover);
    --sidebar-active-background: #E8F0FF;
    --sidebar-active-text: var(--color-primary-strong);
    --sidebar-active-icon: var(--color-primary);
    --sidebar-border: var(--color-border);
}