/*
 * Atlas Platform - CSS Variables
 *
 * This file defines the core design tokens for theming the Atlas Platform.
 * All Atlas components should use these variables for consistent styling.
 *
 * Naming Convention: --at-{category}-{property}[-{variant}]
 * Categories: color, spacing, border, shadow, font, transition
 */

:root {
    /* ==========================================================================
       COLOR PALETTE - Primary
       ========================================================================== */

    /* Primary brand color - used for primary actions, links, active states */
    --at-primary: #0d6efd;
    --at-primary-hover: #0b5ed7;
    --at-primary-active: #0a58ca;
    --at-primary-light: #cfe2ff;
    --at-primary-dark: #084298;
    --at-primary-rgb: 13, 110, 253;

    /* Secondary color - used for secondary actions, less prominent elements */
    --at-secondary: #6c757d;
    --at-secondary-hover: #5c636a;
    --at-secondary-active: #565e64;
    --at-secondary-light: #e2e3e5;
    --at-secondary-dark: #41464b;
    --at-secondary-rgb: 108, 117, 125;

    /* ==========================================================================
       COLOR PALETTE - Semantic
       ========================================================================== */

    /* Success - confirmations, positive feedback, completed states */
    --at-success: #198754;
    --at-success-hover: #157347;
    --at-success-active: #146c43;
    --at-success-light: #d1e7dd;
    --at-success-dark: #0f5132;
    --at-success-rgb: 25, 135, 84;

    /* Danger - errors, destructive actions, alerts */
    --at-danger: #dc3545;
    --at-danger-hover: #bb2d3b;
    --at-danger-active: #b02a37;
    --at-danger-light: #f8d7da;
    --at-danger-dark: #842029;
    --at-danger-rgb: 220, 53, 69;

    /* Warning - caution, pending states, important notices */
    --at-warning: #ffc107;
    --at-warning-hover: #ffca2c;
    --at-warning-active: #ffcd39;
    --at-warning-light: #fff3cd;
    --at-warning-dark: #664d03;
    --at-warning-rgb: 255, 193, 7;

    /* Info - informational messages, help text */
    --at-info: #0dcaf0;
    --at-info-hover: #31d2f2;
    --at-info-active: #3dd5f3;
    --at-info-light: #cff4fc;
    --at-info-dark: #055160;
    --at-info-rgb: 13, 202, 240;

    /* ==========================================================================
       COLOR PALETTE - Neutrals
       ========================================================================== */

    /* Light shades - backgrounds, cards, subtle borders */
    --at-light: #f8f9fa;
    --at-light-hover: #f9fafb;
    --at-light-active: #f9fafb;
    --at-light-rgb: 248, 249, 250;

    /* Dark shades - text, dark backgrounds */
    --at-dark: #212529;
    --at-dark-hover: #1c1f23;
    --at-dark-active: #1a1e21;
    --at-dark-rgb: 33, 37, 41;

    /* White and black */
    --at-white: #ffffff;
    --at-black: #000000;

    /* Gray scale — tinted toward --at-accent-hue (DESIGN-PRINCIPLES §2; WS1).
       Perceptually subtle (chroma 0.005–0.015) but cohesive with the brand accent. */
    --at-gray-50:  oklch(98% 0.005 var(--at-accent-hue, 250));
    --at-gray-100: oklch(95% 0.005 var(--at-accent-hue, 250));
    --at-gray-200: oklch(92% 0.008 var(--at-accent-hue, 250));
    --at-gray-300: oklch(85% 0.010 var(--at-accent-hue, 250));
    --at-gray-400: oklch(70% 0.012 var(--at-accent-hue, 250));
    --at-gray-500: oklch(55% 0.015 var(--at-accent-hue, 250));
    --at-gray-600: oklch(45% 0.015 var(--at-accent-hue, 250));
    --at-gray-700: oklch(35% 0.012 var(--at-accent-hue, 250));
    --at-gray-800: oklch(25% 0.010 var(--at-accent-hue, 250));
    --at-gray-900: oklch(15% 0.008 var(--at-accent-hue, 250));

    /* ==========================================================================
       COLOR PALETTE - UI Elements
       ========================================================================== */

    /* Body */
    --at-body-bg: #ffffff;
    --at-body-color: #212529;

    /* Surface — alias for body background; consumed by App.razor loading screens
       and any part that wants "the canvas behind cards" without re-deriving it. */
    --at-surface: var(--at-body-bg);

    /* Text colors */
    --at-text-primary: #212529;
    --at-text-secondary: #6c757d;
    --at-text-muted: #adb5bd;
    --at-text-light: #f8f9fa;
    --at-text-dark: #212529;

    /* Link colors */
    --at-link-color: var(--at-primary);
    --at-link-hover-color: var(--at-primary-hover);
    --at-link-visited-color: #551a8b;

    /* ==========================================================================
       COLOR PALETTE - Component-Specific
       ========================================================================== */

    /* Header/Navbar */
    --at-header-bg: #212529;
    --at-header-color: #ffffff;
    --at-header-border: rgba(255, 255, 255, 0.1);

    /* Sidebar */
    --at-sidebar-bg: #f8f9fa;
    --at-sidebar-color: #212529;
    --at-sidebar-hover-bg: #e9ecef;
    --at-sidebar-active-bg: var(--at-primary-light);
    --at-sidebar-active-color: var(--at-primary-dark);
    --at-sidebar-border: #dee2e6;

    /* Cards */
    --at-card-bg: #ffffff;
    --at-card-color: #212529;
    --at-card-border: #dee2e6;
    --at-card-header-bg: #f8f9fa;
    --at-card-header-color: #212529;
    --at-card-footer-bg: #f8f9fa;

    /* Tables */
    --at-table-bg: transparent;
    --at-table-color: #212529;
    --at-table-border: #dee2e6;
    --at-table-border-color: #dee2e6;
    --at-table-striped-bg: rgba(0, 0, 0, 0.02);
    --at-table-hover-bg: rgba(0, 0, 0, 0.04);
    --at-table-active-bg: rgba(var(--at-primary-rgb), 0.1);
    --at-table-active-color: var(--at-text-primary);
    --at-table-header-bg: #f8f9fa;
    --at-table-header-color: #495057;
    --at-table-cell-padding: 0.75rem;
    --at-table-cell-padding-sm: 0.5rem;
    --at-table-cell-padding-lg: 1rem;

    /* Lists */
    --at-list-bg: transparent;
    --at-list-color: #212529;
    --at-list-border: #dee2e6;
    --at-list-item-padding: 0.75rem 1rem;
    --at-list-item-padding-sm: 0.5rem 0.75rem;
    --at-list-item-padding-lg: 1rem 1.25rem;
    --at-list-striped-bg: rgba(0, 0, 0, 0.02);
    --at-list-hover-bg: rgba(0, 0, 0, 0.04);
    --at-list-active-bg: rgba(var(--at-primary-rgb), 0.1);
    --at-list-active-color: var(--at-text-primary);
    --at-list-selected-bg: rgba(var(--at-primary-rgb), 0.15);
    --at-list-selected-color: var(--at-primary-dark);
    --at-list-disabled-color: var(--at-text-muted);
    --at-list-disabled-bg: var(--at-gray-100);

    /* Details (key-value pairs) */
    --at-detail-bg: transparent;
    --at-detail-color: #212529;
    --at-detail-border: #dee2e6;
    --at-detail-item-padding: 0.75rem 0;
    --at-detail-item-padding-sm: 0.5rem 0;
    --at-detail-item-padding-lg: 1rem 0;
    --at-detail-field-color: var(--at-text-secondary);
    --at-detail-field-width: 35%;
    --at-detail-field-min-width: 120px;
    --at-detail-value-color: var(--at-text-primary);
    --at-detail-striped-bg: rgba(0, 0, 0, 0.02);
    --at-detail-hover-bg: rgba(0, 0, 0, 0.04);

    /* Forms */
    --at-input-bg: #ffffff;
    --at-input-color: #212529;
    --at-input-border: #ced4da;
    --at-input-focus-border: var(--at-primary);
    --at-input-focus-shadow: 0 0 0 0.25rem rgba(var(--at-primary-rgb), 0.25);
    --at-input-placeholder: #6c757d;
    --at-input-disabled-bg: #e9ecef;
    --at-input-valid-border: var(--at-success);
    --at-input-invalid-border: var(--at-danger);
    --at-form-label-width: 30%;

    /* Buttons */
    --at-btn-padding-y: 0.375rem;
    --at-btn-padding-x: 0.75rem;
    --at-btn-font-size: var(--at-font-size-base);
    --at-btn-line-height: var(--at-line-height-base);
    --at-btn-font-weight: var(--at-font-weight-normal);
    --at-btn-border-width: var(--at-border-width);
    --at-btn-border-radius: var(--at-border-radius);
    --at-btn-focus-shadow-width: 0.25rem;
    --at-btn-disabled-opacity: 0.65;
    /* Button small */
    --at-btn-padding-y-sm: 0.25rem;
    --at-btn-padding-x-sm: 0.5rem;
    --at-btn-font-size-sm: var(--at-font-size-sm);
    --at-btn-border-radius-sm: var(--at-border-radius-sm);
    /* Button large */
    --at-btn-padding-y-lg: 0.5rem;
    --at-btn-padding-x-lg: 1rem;
    --at-btn-font-size-lg: var(--at-font-size-lg);
    --at-btn-border-radius-lg: var(--at-border-radius-lg);

    /* ==========================================================================
       SPACING
       ========================================================================== */

    /* Base spacing unit (used for calculations) */
    --at-spacing-unit: 0.25rem;

    /* Spacing scale */
    --at-spacing-0: 0;
    --at-spacing-1: 0.25rem;   /* 4px */
    --at-spacing-2: 0.5rem;    /* 8px */
    --at-spacing-3: 1rem;      /* 16px */
    --at-spacing-4: 1.5rem;    /* 24px */
    --at-spacing-5: 3rem;      /* 48px */

    /* Named spacing for semantic use */
    --at-spacing-xs: var(--at-spacing-1);
    --at-spacing-sm: var(--at-spacing-2);
    --at-spacing-md: var(--at-spacing-3);
    --at-spacing-lg: var(--at-spacing-4);
    --at-spacing-xl: var(--at-spacing-5);

    /* Component-specific spacing */
    --at-gutter-x: 1.5rem;
    --at-gutter-y: 0;
    --at-section-spacing: 2rem;
    --at-card-spacing: 1rem;
    --at-form-group-spacing: 1rem;

    /* ==========================================================================
       BORDERS
       ========================================================================== */

    /* Border widths */
    --at-border-width: 1px;
    --at-border-width-2: 2px;
    --at-border-width-3: 3px;
    --at-border-width-4: 4px;
    --at-border-width-5: 5px;

    /* Border colors */
    --at-border-color: #dee2e6;
    --at-border-color-light: #f8f9fa;
    --at-border-color-dark: #adb5bd;
    --at-border-color-translucent: rgba(0, 0, 0, 0.175);

    /* Border radius */
    --at-border-radius: 0.375rem;
    --at-border-radius-sm: 0.25rem;
    --at-border-radius-lg: 0.5rem;
    --at-border-radius-xl: 1rem;
    --at-border-radius-pill: 50rem;
    --at-border-radius-circle: 50%;

    /* Shorthand borders */
    --at-border: var(--at-border-width) solid var(--at-border-color);
    --at-border-light: var(--at-border-width) solid var(--at-border-color-light);
    --at-border-dark: var(--at-border-width) solid var(--at-border-color-dark);

    /* ==========================================================================
       SHADOWS
       ========================================================================== */

    /* Box shadows - layered for depth */
    --at-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --at-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --at-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    /* Inset shadows */
    --at-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

    /* Focus shadows (for form elements) */
    --at-focus-shadow: 0 0 0 0.25rem rgba(var(--at-primary-rgb), 0.25);
    --at-focus-shadow-danger: 0 0 0 0.25rem rgba(var(--at-danger-rgb), 0.25);
    --at-focus-shadow-success: 0 0 0 0.25rem rgba(var(--at-success-rgb), 0.25);

    /* Elevated shadow (for dropdowns, modals) */
    --at-shadow-dropdown: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --at-shadow-modal: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);

    /* No shadow */
    --at-shadow-none: none;

    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */

    /* Font families */
    --at-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --at-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Font sizes */
    --at-font-size-base: 1rem;
    --at-font-size-xs: 0.75rem;
    --at-font-size-sm: 0.875rem;
    --at-font-size-lg: 1.25rem;
    --at-font-size-xl: 1.5rem;

    /* Heading sizes */
    --at-h1-font-size: 2.5rem;
    --at-h2-font-size: 2rem;
    --at-h3-font-size: 1.75rem;
    --at-h4-font-size: 1.5rem;
    --at-h5-font-size: 1.25rem;
    --at-h6-font-size: 1rem;

    /* Font weights */
    --at-font-weight-light: 300;
    --at-font-weight-normal: 400;
    --at-font-weight-medium: 500;
    --at-font-weight-semibold: 600;
    --at-font-weight-bold: 700;

    /* Line heights */
    --at-line-height-base: 1.5;
    --at-line-height-sm: 1.25;
    --at-line-height-lg: 2;

    /* ==========================================================================
       TRANSITIONS
       ========================================================================== */

    /* Duration */
    --at-transition-duration: 0.15s;
    --at-transition-duration-fast: 0.1s;
    --at-transition-duration-slow: 0.3s;

    /* Easing */
    --at-transition-timing: ease-in-out;

    /* Common transitions */
    --at-transition-base: all var(--at-transition-duration) var(--at-transition-timing);
    --at-transition-fade: opacity var(--at-transition-duration) linear;
    --at-transition-collapse: height var(--at-transition-duration-slow) var(--at-transition-timing);

    /* ==========================================================================
       Z-INDEX SCALE
       ========================================================================== */

    --at-zindex-dropdown: 1000;
    --at-zindex-sticky: 1020;
    --at-zindex-fixed: 1030;
    --at-zindex-offcanvas-backdrop: 1040;
    --at-zindex-offcanvas: 1045;
    --at-zindex-modal-backdrop: 1050;
    --at-zindex-modal: 1055;
    --at-zindex-popover: 1070;
    --at-zindex-tooltip: 1080;
    --at-zindex-toast: 1090;

    /* ==========================================================================
       LAYOUT
       ========================================================================== */

    /* Container max-widths */
    --at-container-sm: 540px;
    --at-container-md: 720px;
    --at-container-lg: 960px;
    --at-container-xl: 1140px;
    --at-container-xxl: 1320px;

    /* Header height */
    --at-header-height: 56px;

    /* Sidebar width — dynamic: scales with viewport, clamped between 200–240px */
    --at-sidebar-width: clamp(200px, 16vw, 240px);
    --at-sidebar-collapsed-width: 64px;

    /* Section strip height (mobile responsive nav) */
    --at-section-strip-height: 40px;

    /* Footer height */
    --at-footer-height: 48px;

    /* ==========================================================================
       WS1 — EDITORIAL TOKENS (DESIGN-PRINCIPLES §1–§4 + Impeccable)
       Additive layer. Existing tokens above stay intact; downstream parts use
       these for editorial typography, accent, rhythm, motion. Per-site override:
       :root { --at-accent-hue: 165; }   (e.g. MotorhomeClub forest/teal)
       ========================================================================== */

    /* Single brand hue — every accent + tinted neutral derives from this */
    --at-accent-hue: 250;   /* platform default (Atlas blue) */

    /* Editorial accent (OKLCH; vary lightness, hold chroma + hue) */
    --at-accent:        oklch(58% 0.12 var(--at-accent-hue));
    --at-accent-ink:    oklch(42% 0.10 var(--at-accent-hue));
    --at-accent-soft:   oklch(96% 0.02 var(--at-accent-hue));

    /* Status (OKLCH, independent hues — semantic colors stay generic per §2) */
    --at-status-success:      oklch(60% 0.14 150);
    --at-status-success-soft: oklch(95% 0.04 150);
    --at-status-warning:      oklch(72% 0.14  80);
    --at-status-warning-soft: oklch(95% 0.04  80);
    --at-status-danger:       oklch(58% 0.18  25);
    --at-status-danger-soft:  oklch(95% 0.04  25);
    --at-status-info:         oklch(60% 0.10 230);
    --at-status-info-soft:    oklch(95% 0.04 230);

    /* Type scale — 1.2 ratio (minor third), fixed not fluid (product UI) */
    --at-text-eyebrow:     0.6875rem;   /* 11px — uppercase + letter-spacing 0.12em */
    --at-text-meta:        0.75rem;     /* 12px */
    --at-text-label:       0.8125rem;   /* 13px */
    --at-text-body:        1rem;        /* 16px — Impeccable minimum */
    --at-text-h2:          1.125rem;    /* 18px — card section title */
    --at-text-h1:          1.375rem;    /* 22px — page title */
    --at-text-display:     2.75rem;     /* 44px — PageHeader hero */

    --at-leading-tight:  1.2;
    --at-leading-snug:   1.35;
    --at-leading-normal: 1.5;           /* body — yields 24px rhythm at 16px */

    /* 4pt spacing scale (DESIGN-PRINCIPLES §3) */
    --at-space-1:   4px;
    --at-space-2:   8px;
    --at-space-3:  12px;
    --at-space-4:  16px;
    --at-space-5:  20px;
    --at-space-6:  24px;
    --at-space-7:  32px;
    --at-space-8:  48px;
    --at-space-9:  64px;
    --at-space-10: 96px;

    /* Rhythm aliases (semantic — name by relationship, not value) */
    --at-page-pad-x:  var(--at-space-6);
    --at-page-pad-y:  var(--at-space-6);
    --at-section-gap: var(--at-space-6);
    --at-card-gap:    var(--at-space-5);
    --at-field-gap:   var(--at-space-4);
    --at-card-pad:    var(--at-space-6);

    /* Elevation — subtle by design ("if you can clearly see it, it's too strong") */
    --at-shadow-card-rest:  0 1px 2px oklch(0% 0 0 / 0.04), 0 1px 1px oklch(0% 0 0 / 0.03);
    --at-shadow-card-float: 0 6px 24px -12px oklch(0% 0 0 / 0.18), 0 2px 4px oklch(0% 0 0 / 0.04);

    /* Radii (editorial; coexists with bootstrap --at-border-radius-* above) */
    --at-radius-sm:   8px;
    --at-radius-md:  12px;
    --at-radius-lg:  16px;
    --at-radius-2xl: 20px;
    --at-radius-pill: 999px;

    /* Motion (DESIGN-PRINCIPLES §4) */
    --at-duration-micro:    150ms;      /* button press, toggle */
    --at-duration-state:    200ms;      /* hover, menu open — product default */
    --at-duration-shift:    300ms;      /* accordion, drawer */
    --at-duration-entrance: 500ms;      /* hero reveal */

    --at-ease-out-quart: cubic-bezier(0.25, 1,    0.5,  1);     /* default entrance */
    --at-ease-out-quint: cubic-bezier(0.22, 1,    0.36, 1);
    --at-ease-out-expo:  cubic-bezier(0.16, 1,    0.3,  1);
    --at-ease-in-quart:  cubic-bezier(0.7,  0,    0.84, 0);     /* exits */
    --at-ease-in-out:    cubic-bezier(0.65, 0,    0.35, 1);     /* toggles */

    /* Breakpoints (content-driven; three is enough per §6) */
    --at-breakpoint-sm:  640px;
    --at-breakpoint-md:  768px;
    --at-breakpoint-lg: 1024px;          /* WS2 sticky-column kicks in here */
}

/* ==========================================================================
   WS1 — GLOBAL POLISH (DESIGN-PRINCIPLES §1, §4, §5)
   Free wins that improve every page; applied outside :root so they actually
   take effect on document elements.
   ========================================================================== */

h1, h2, h3 { text-wrap: balance; }
article p   { text-wrap: pretty; }

/* :focus-visible — keyboard users get the ring, mouse users don't (§5) */
*:focus     { outline: none; }
*:focus-visible {
    outline: 2px solid var(--at-accent);
    outline-offset: 2px;
}

/* Reduced motion — non-optional accessibility (§4). Vestibular disorders
   affect ~35% of adults over 40. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* WS4 — 44px tap target on touch input (DESIGN-PRINCIPLES §6).
   Touch input, regardless of viewport width. Visual size can stay smaller via
   pseudo-element padding (icon-only buttons); base controls bump to 44px tall. */
@media (pointer: coarse) {
    button,
    [role="button"],
    a[href],
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px;
    }
}