/* ============================================================
   LevelUP Design Tokens (light theme, orange/charcoal brand)
   ALT token names mapped to LevelUP palette — single source of truth
   ============================================================ */

:root {
    /* Brand */
    --brand-charcoal: #2A2F36;
    --brand-charcoal-700: #363C44;
    --brand-charcoal-800: #22262B;
    --brand-orange: #FF6A00;
    --brand-orange-600: #E55F00;
    --brand-orange-700: #CC5500;
    --brand-orange-light: #FF8533;
    --brand-orange-soft: #FFF0E6;
    --gradient-brand: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-light) 100%);
    --gradient-brand-vertical: linear-gradient(180deg, var(--brand-orange) 0%, var(--brand-orange-700) 100%);

    /* ALT accent aliases (orange, not blue) */
    --accent: var(--brand-orange);
    --accent-bright: var(--brand-orange-light);
    --accent-deep: var(--brand-orange-700);
    --accent-soft: rgba(255, 106, 0, 0.10);
    --accent-line: rgba(255, 106, 0, 0.28);

    /* Surfaces — light theme */
    --background: #F4F5F7;
    --foreground: var(--brand-charcoal);
    --surface-bg: var(--background);
    --surface-card: #FFFFFF;
    --surface-muted: #ECEEF2;
    --surface-elevated: #F8F9FA;
    --surface-inverse: var(--brand-charcoal);
    --card: var(--surface-card);
    --card-hover: #F3F4F6;

    /* Text */
    --text-primary: var(--brand-charcoal);
    --text-secondary: #4B5563;
    --text-muted: #6B7280;
    --text-subtle: #9CA3AF;
    --text-body-min: 1.125rem;
    --text-on-brand: #ffffff;

    /* Borders */
    --border-color: #E5E7EB;
    --border: rgba(42, 47, 54, 0.08);
    --border-soft: rgba(42, 47, 54, 0.05);
    --border-strong: #D1D5DB;
    --hover: rgba(42, 47, 54, 0.04);
    --ring: rgba(255, 106, 0, 0.35);

    --opacity-disabled: 0.58;

    /* Semantic outcomes */
    --semantic-pass: #198754;
    --semantic-pass-600: #157347;
    --semantic-pass-700: #146c43;
    --semantic-pass-soft: rgba(25, 135, 84, 0.10);
    --semantic-pass-line: rgba(25, 135, 84, 0.30);
    --semantic-fail: #D92D39;
    --semantic-fail-600: #C02531;
    --semantic-fail-soft: rgba(217, 45, 57, 0.10);
    --semantic-fail-line: rgba(217, 45, 57, 0.32);
    --danger: var(--semantic-fail);
    --danger-soft: #fdecee;
    --warning: #b8860b;
    --warning-soft: #fff7e6;
    --warning-ink: #8B5A00;
    --warning-banner-bg: var(--warning-soft);
    --semantic-warning: #F59E0B;
    --semantic-warning-soft: rgba(245, 158, 11, 0.12);
    --semantic-warning-line: rgba(245, 158, 11, 0.32);
    --semantic-warning-border: rgba(245, 158, 11, 0.45);
    --success: var(--semantic-pass);
    --success-soft: var(--semantic-pass-soft);
    --success-line: var(--semantic-pass-line);
    --info: #2563eb;
    --info-soft: rgba(37, 99, 235, 0.10);
    --info-line: rgba(37, 99, 235, 0.28);

    /* Connectivity status */
    --status-dot-online: #22c55e;
    --status-dot-unavailable: #ef4444;
    --status-dot-offline: #f59e0b;
    --danger-text-on-dark: #fca5a5;

    /* Metric accents */
    --metric-assets: var(--brand-orange);
    --metric-inspections: var(--semantic-warning);
    --metric-workflow: var(--semantic-pass);
    --metric-risk: var(--semantic-fail);

    /* Bootstrap bridge */
    --bs-primary: var(--brand-orange);
    --bs-primary-rgb: 255, 106, 0;
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--surface-bg);
    --bs-border-color: var(--border-color);

    /* Radii */
    --radius: 16px;
    --radius-sm: 11px;
    --radius-md: var(--radius);
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(42, 47, 54, 0.06);
    --shadow-sm: 0 2px 8px rgba(42, 47, 54, 0.07);
    --shadow: 0 1px 2px rgba(42, 47, 54, 0.06), 0 4px 16px -4px rgba(42, 47, 54, 0.10);
    --shadow-md: 0 8px 24px rgba(42, 47, 54, 0.10);
    --shadow-lg: 0 16px 48px -16px rgba(42, 47, 54, 0.14);
    --shadow-brand: 0 6px 18px -8px rgba(255, 106, 0, 0.45);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --amos-transition: 0.16s ease;
    --dur-fast: 120ms;
    --dur: 200ms;
    --dur-slow: 320ms;

    /*
     * Responsive breakpoints (tablet-first)
     * Base styles target phones; enhance at each step.
     *   --bp-tablet        820px  tablet portrait (iPad 10.2" portrait)
     *   --bp-tablet-lg     1180px tablet landscape (iPad Air landscape)
     *   --bp-desktop       1400px large monitors — full width with generous gutters
     */
    --bp-tablet: 820px;
    --bp-tablet-lg: 1180px;
    --bp-desktop: 1400px;

    /* Layout rhythm (hub) — base = phone */
    --page-body-padding: 16px;
    --page-header-margin-bottom: 20px;
    --card-body-padding: 16px;
    --card-header-padding: 12px 16px;
    --topbar-height: 60px;
    --hub-shell-max: none;
    --hub-shell-gutter: 0;
    --page-gutter-inline: 16px;
    --dashboard-widget-gap: 16px;

    /* App layout */
    --header-h: 56px;
    --touch-target-min: 3.5rem;
    --content-max: none;
    --scoring-tab-bar-h: 4.6rem;
    --section-nav-bar-h: 4.85rem;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Tablet portrait */
@media (min-width: 820px) {
    :root {
        --page-body-padding: 20px 24px 32px;
        --page-header-margin-bottom: 24px;
        --card-body-padding: 20px;
        --card-header-padding: 14px 20px;
        --page-gutter-inline: 24px;
        --dashboard-widget-gap: 20px;
    }
}

/* Tablet landscape — primary field + hub target */
@media (min-width: 1180px) {
    :root {
        --page-body-padding: 28px 32px 48px;
        --page-header-margin-bottom: 28px;
        --page-gutter-inline: 32px;
        --dashboard-widget-gap: 24px;
    }
}

/* Desktop — full width with consistent horizontal gutters */
@media (min-width: 1400px) {
    :root {
        --page-body-padding: 32px 40px 56px;
        --page-gutter-inline: 40px;
    }
}