/* CV.run design tokens
   Load this BEFORE style.css and any page CSS. Everything downstream should
   reference the semantic layer (--brand, --interactive, --ink, ...) rather
   than raw scale steps, so a future dark theme only has to redefine the
   semantic block. */

:root {
    /* ---- Raw palette ---- */
    --orange-50:  #FFF7ED;
    --orange-100: #FFEDD5;
    --orange-200: #FED7AA;
    --orange-300: #FDBA74;
    --orange-400: #FB923C;
    --orange-500: #F97316;
    --orange-600: #EA580C;
    --orange-700: #C2410C;
    --orange-800: #9A3412;
    --orange-900: #7C2D12;

    --slate-50:  #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;

    /* ---- Semantic colors ---- */
    /* Vivid-orange system: orange is used as FILL with near-black text on top
       (--on-brand), never as small text on white. --brand-strong (3.6:1) is the
       ceiling for large-text accents, meaningful icons, and borders. */
    --brand: var(--orange-500);              /* button fills, badges, underlines */
    --brand-strong: var(--orange-600);       /* hover fills, wordmark, large accents */
    --on-brand: var(--slate-900);            /* text on orange fills - 6.4:1 */
    --interactive: var(--orange-600);        /* accent borders, icons, large text */
    --interactive-hover: var(--orange-600);
    --interactive-active: var(--orange-600);
    --tint-1: var(--orange-50);
    --tint-2: var(--orange-100);
    --tint-3: var(--orange-200);

    --ink: var(--slate-800);                 /* headings */
    --ink-soft: var(--slate-700);            /* body text */
    --muted: var(--slate-600);               /* secondary text - 7.5:1 */
    --faint: var(--slate-500);               /* smallest AA-passing gray - 4.76:1 */
    --surface: #FFFFFF;
    --surface-alt: var(--slate-50);
    --border: var(--slate-200);
    --border-strong: var(--slate-300);

    --success: #15803D;      --success-tint: #DCFCE7;
    --warning: #B45309;      --warning-tint: #FEF3C7;
    --danger:  #B91C1C;      --danger-tint:  #FEE2E2;
    --info:    #0369A1;      --info-tint:    #E0F2FE;
    --accent-teal:   #0F766E;
    --accent-violet: #6D28D9;

    /* ---- Shape / depth / motion ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .14);
    --focus-ring-color: var(--orange-600);
    --focus-ring: 0 0 0 3px rgba(234, 88, 12, .35);
    --dur-fast: 120ms;
    --dur: 200ms;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --gradient-brand: linear-gradient(135deg, #F97316, #EA580C);
    --gradient-hero: linear-gradient(160deg, #FFF7ED, #FFEDD5);

    /* ---- Typography ---- */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    --font-display: 'Poppins', sans-serif;
}

/* ---- Bootstrap 5.3 bridge ---- */
:root {
    --bs-body-color: var(--ink-soft);
    --bs-body-bg: var(--surface-alt);
    --bs-heading-color: var(--ink);
    --bs-link-color: var(--ink);
    --bs-link-color-rgb: 30, 41, 59;
    --bs-link-hover-color: var(--slate-900);
    --bs-link-hover-color-rgb: 15, 23, 42;
    --bs-primary: var(--brand-strong);
    --bs-primary-rgb: 234, 88, 12;
    --bs-border-color: var(--border);
    --bs-border-radius: .75rem;
    --bs-focus-ring-color: rgba(234, 88, 12, .35);
    --bs-success: var(--success);   --bs-success-rgb: 21, 128, 61;
    --bs-danger: var(--danger);     --bs-danger-rgb: 185, 28, 28;
    --bs-warning: var(--warning);   --bs-warning-rgb: 180, 83, 9;
    --bs-info: var(--info);         --bs-info-rgb: 3, 105, 161;
}

/* Bootstrap components that bake their own colors */
.form-control:focus,
.form-select:focus {
    border-color: var(--interactive);
    box-shadow: var(--focus-ring);
}

.form-check-input:checked {
    background-color: var(--brand-strong);
    border-color: var(--brand-strong);
}

.form-check-input:focus {
    border-color: var(--interactive);
    box-shadow: var(--focus-ring);
}

.progress-bar {
    background-color: var(--brand-strong);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--brand);
    --bs-nav-pills-link-active-color: var(--on-brand);
}

.pagination {
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-active-color: var(--on-brand);
    --bs-pagination-color: var(--ink);
    --bs-pagination-hover-color: var(--slate-900);
}

/* ---- Legacy aliases ----
   Old variable names used across templates and JS keep working; they now
   resolve to the orange/slate system. New code should use semantic names. */
:root {
    --primary-coral: var(--brand-strong);
    --coral: var(--brand-strong);
    --primary-coral-dark: var(--interactive-hover);
    --coral-dark: var(--interactive-hover);
    --primary-coral-light: var(--orange-300);
    --coral-light: var(--orange-300);
    --secondary-navy: var(--ink);
    --mint: var(--accent-teal);
    --secondary-mint: var(--accent-teal);
    --secondary-yellow: var(--warning);
    --secondary-lavender: var(--accent-violet);
    --neutral-white: #FFFFFF;
    --neutral-off-white: var(--surface-alt);
    --neutral-light-gray: var(--slate-100);
    --neutral-gray: var(--border);
    --neutral-dark-gray: var(--muted);
    --neutral-charcoal: var(--ink-soft);
    --gradient-warm: var(--gradient-brand);
    --gradient-cool: linear-gradient(135deg, #6366F1, #7C3AED);

    /* Names referenced by start.html / wizard.html / auth pages that were
       never defined anywhere before */
    --text-primary: var(--ink);
    --text-secondary: var(--muted);
    --bg-light: var(--surface-alt);
    --primary: var(--brand-strong);
    --purple: var(--accent-violet);
    --border-light: var(--border);
    --light-gray: var(--slate-100);

    /* cv_builder_mobile.css token names (its own :root fork was removed) */
    --mobile-coral: var(--brand-strong);
    --mobile-coral-light: var(--tint-2);
    --mobile-coral-dark: var(--interactive-hover);
    --mobile-mint: var(--accent-teal);
    --mobile-mint-light: #CCFBF1;
    --mobile-navy: var(--ink);
    --mobile-gray-light: var(--surface-alt);
    --mobile-gray-medium: var(--border);
    --mobile-gray-dark: var(--muted);
    --mobile-shadow: var(--shadow-sm);
    --mobile-radius: var(--radius-lg);
    --mobile-header-height: 56px;
    --mobile-nav-height: 72px;
}

/* ---- Global accessibility primitives ---- */
:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}