/*
 * LeviLingo theme — the single source of truth for brand color, type and spacing.
 * Load order: bootstrap.min.css → theme.css → app.css → page @push('styles').
 * See docs/BRAND_COLORS.md. Change a value here, not in page <style> blocks.
 */

/* ==========================================================================
   1. Brand palette (fixed — the same in light and dark mode)
   ========================================================================== */
:root {
    --ll-deep-blue: #003366;
    --ll-deep-blue-600: #005BAA;
    --ll-deep-blue-50: #E8EEF6;

    --ll-sky: #00AEEF;
    --ll-sky-700: #0077B6; /* darkest sky that still reads as sky; white text 4.8:1 */
    --ll-sky-50: #E6F7FD;

    --ll-teal: #00C896;
    --ll-teal-700: #00875F;
    --ll-teal-800: #006E4D;
    --ll-teal-50: #E6FAF4;

    --ll-amber: #FFC107;
    --ll-amber-700: #8A6100;
    --ll-amber-50: #FFF8E1;

    --ll-coral: #FF6B6B;
    --ll-coral-700: #C23B3B;
    --ll-coral-50: #FFF0F0;

    --ll-purple: #8B5CF6;
    --ll-purple-700: #6D3FD8;
    --ll-purple-50: #F3EEFF;

    /* Neutrals, tinted toward Deep Blue */
    --ll-ink-900: #1A2B3C;
    --ll-ink-700: #3D5368;
    --ll-ink-600: #5A6C7D;
    --ll-ink-400: #8A99A8;
    --ll-ink-300: #C5D0DC;
    --ll-ink-200: #D5DEE6;
    --ll-ink-100: #E8EEF4;
    --ll-ink-50: #F8FAFC;
    --ll-white: #FFFFFF;

    /* Dark-mode surfaces */
    --ll-night-900: #0B1F33;
    --ll-night-800: #12304D;
    --ll-night-700: #1A4066;
}

/* ==========================================================================
   2. Semantic tokens (switch with the theme). Use these in components.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    --color-primary: var(--ll-deep-blue);
    --color-primary-light: var(--ll-deep-blue-600);
    --color-primary-alt: var(--ll-sky);
    --color-primary-soft: var(--ll-deep-blue-50);

    --color-secondary: var(--ll-sky);
    --color-secondary-rich: var(--ll-sky-700);

    --color-accent: var(--ll-teal);
    --color-accent-fresh: var(--ll-teal);
    --color-accent-2: var(--ll-purple);
    --color-highlight: var(--ll-amber);
    --color-support: var(--ll-coral);

    --color-success: var(--ll-teal-700);
    --color-success-soft: var(--ll-teal-50);
    --color-info: var(--ll-sky-700);
    --color-info-soft: var(--ll-sky-50);
    --color-warning: var(--ll-amber-700);
    --color-warning-soft: var(--ll-amber-50);
    --color-error: var(--ll-coral);
    --color-danger: var(--ll-coral-700);
    --color-danger-soft: var(--ll-coral-50);

    --color-background: var(--ll-ink-50);
    --color-background-alt: var(--ll-white);
    --color-surface: var(--ll-white);
    --color-surface-muted: var(--ll-ink-100);
    --color-border: rgba(0, 51, 102, 0.1);
    --color-border-strong: var(--ll-ink-200);

    --color-heading: var(--ll-deep-blue);
    --color-text-primary: var(--ll-ink-900);
    --color-text-secondary: var(--ll-ink-600);
    --color-text-muted: #66788A; /* ink-400 is too light for text on white; this is 4.5:1 */
    --color-text-light: var(--ll-white);
    --color-link: var(--ll-deep-blue-600);
    --color-link-hover: var(--ll-sky-700);
    --color-focus-ring: rgba(0, 174, 239, 0.35);

    --shadow-sm: 0 2px 6px rgba(0, 51, 102, 0.05);
    --shadow-md: 0 10px 24px rgba(0, 51, 102, 0.06);
    --shadow-lg: 0 18px 40px rgba(0, 51, 102, 0.12);

    --gradient-primary: linear-gradient(135deg, var(--ll-deep-blue) 0%, var(--ll-deep-blue-600) 100%);
    --gradient-hero:
        radial-gradient(circle at 78% 18%, rgba(0, 174, 239, 0.14), transparent 34%),
        radial-gradient(circle at 88% 72%, rgba(0, 200, 150, 0.12), transparent 30%),
        var(--ll-ink-50);
}

[data-bs-theme="dark"] {
    --color-primary: var(--ll-sky);
    --color-primary-light: #4DC4F5;
    --color-primary-alt: var(--ll-sky);
    --color-primary-soft: rgba(0, 174, 239, 0.12);

    --color-success: var(--ll-teal);
    --color-success-soft: rgba(0, 200, 150, 0.12);
    --color-info: var(--ll-sky);
    --color-info-soft: rgba(0, 174, 239, 0.12);
    --color-warning: var(--ll-amber);
    --color-warning-soft: rgba(255, 193, 7, 0.12);
    --color-danger: var(--ll-coral);
    --color-danger-soft: rgba(255, 107, 107, 0.12);

    --color-background: var(--ll-night-900);
    --color-background-alt: var(--ll-night-800);
    --color-surface: var(--ll-night-800);
    --color-surface-muted: var(--ll-night-700);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    --color-heading: var(--ll-ink-50);
    --color-text-primary: var(--ll-ink-50);
    --color-text-secondary: var(--ll-ink-300);
    --color-text-muted: var(--ll-ink-400);
    --color-link: var(--ll-sky);
    --color-link-hover: #4DC4F5;

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.35);

    --gradient-primary: linear-gradient(135deg, var(--ll-night-800) 0%, var(--ll-night-700) 100%);
    --gradient-hero: var(--ll-night-900);
}

/* ==========================================================================
   3. Typography, spacing, radius
   ========================================================================== */
:root {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Type scale (fluid between ~360px and ~1200px) */
    --fs-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.4rem);
    --fs-h1: clamp(2rem, 1.55rem + 1.8vw, 2.75rem);
    --fs-h2: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem);
    --fs-h3: clamp(1.3rem, 1.18rem + 0.5vw, 1.5rem);
    --fs-h4: 1.25rem;
    --fs-h5: 1.125rem;
    --fs-h6: 1rem;
    --fs-lead: 1.125rem;
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;

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

    --lh-tight: 1.12;
    --lh-snug: 1.3;
    --lh-body: 1.65;
    --ls-tight: -0.03em;
    --ls-snug: -0.015em;
    --ls-caps: 0.06em;

    --measure: 40rem; /* comfortable reading width for paragraphs */

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --section-y: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
    --section-y-sm: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-pill: 999px;
}

/* ==========================================================================
   4. Bootstrap bridge — Bootstrap utilities and components use brand colors
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: var(--font-sans);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-body);
    --bs-body-line-height: var(--lh-body);
    --bs-body-color: var(--color-text-primary);
    --bs-body-color-rgb: 26, 43, 60;
    --bs-body-bg: var(--color-background);
    --bs-body-bg-rgb: 248, 250, 252;
    --bs-secondary-color: var(--color-text-secondary);
    --bs-tertiary-bg: var(--ll-ink-100);
    --bs-border-color: var(--color-border-strong);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-md);

    --bs-primary: var(--ll-deep-blue);
    --bs-primary-rgb: 0, 51, 102;
    --bs-secondary: var(--ll-ink-600);
    --bs-secondary-rgb: 90, 108, 125;
    --bs-success: var(--ll-teal-700);
    --bs-success-rgb: 0, 135, 95;
    --bs-info: var(--ll-sky-700);
    --bs-info-rgb: 0, 119, 182; /* sky-700: white badge text stays readable */
    --bs-warning: var(--ll-amber);
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger: var(--ll-coral-700);
    --bs-danger-rgb: 194, 59, 59;
    --bs-light: var(--ll-ink-50);
    --bs-light-rgb: 248, 250, 252;
    --bs-dark: var(--ll-ink-900);
    --bs-dark-rgb: 26, 43, 60;

    --bs-primary-text-emphasis: var(--ll-deep-blue);
    --bs-primary-bg-subtle: var(--ll-deep-blue-50);
    --bs-primary-border-subtle: #B9CCE0;
    --bs-success-text-emphasis: #00563D;
    --bs-success-bg-subtle: var(--ll-teal-50);
    --bs-success-border-subtle: #A6EBD7;
    --bs-info-text-emphasis: #00567A;
    --bs-info-bg-subtle: var(--ll-sky-50);
    --bs-info-border-subtle: #A6E2F8;
    --bs-warning-text-emphasis: #664800;
    --bs-warning-bg-subtle: var(--ll-amber-50);
    --bs-warning-border-subtle: #FFE08A;
    --bs-danger-text-emphasis: #8A2525;
    --bs-danger-bg-subtle: var(--ll-coral-50);
    --bs-danger-border-subtle: #FFC4C4;

    --bs-link-color: var(--color-link);
    --bs-link-color-rgb: 0, 91, 170;
    --bs-link-hover-color: var(--color-link-hover);
    --bs-link-hover-color-rgb: 0, 136, 194;
    --bs-heading-color: var(--color-heading);
    --bs-focus-ring-color: var(--color-focus-ring);
}

[data-bs-theme="dark"] {
    --bs-body-color: var(--color-text-primary);
    --bs-body-color-rgb: 248, 250, 252;
    --bs-body-bg: var(--color-background);
    --bs-body-bg-rgb: 11, 31, 51;
    --bs-secondary-color: var(--color-text-secondary);
    --bs-tertiary-bg: var(--ll-night-700);
    --bs-border-color: var(--color-border-strong);

    --bs-primary: var(--ll-sky);
    --bs-primary-rgb: 0, 174, 239;
    --bs-success: var(--ll-teal);
    --bs-success-rgb: 0, 200, 150;
    --bs-danger: var(--ll-coral);
    --bs-danger-rgb: 255, 107, 107;

    --bs-primary-text-emphasis: #7FD4F7;
    --bs-primary-bg-subtle: rgba(0, 174, 239, 0.12);
    --bs-primary-border-subtle: rgba(0, 174, 239, 0.35);
    --bs-success-text-emphasis: #7DE3C6;
    --bs-success-bg-subtle: rgba(0, 200, 150, 0.12);
    --bs-success-border-subtle: rgba(0, 200, 150, 0.35);
    --bs-info-text-emphasis: #7FD4F7;
    --bs-info-bg-subtle: rgba(0, 174, 239, 0.12);
    --bs-info-border-subtle: rgba(0, 174, 239, 0.35);
    --bs-warning-text-emphasis: #FFD966;
    --bs-warning-bg-subtle: rgba(255, 193, 7, 0.12);
    --bs-warning-border-subtle: rgba(255, 193, 7, 0.35);
    --bs-danger-text-emphasis: #FFA3A3;
    --bs-danger-bg-subtle: rgba(255, 107, 107, 0.12);
    --bs-danger-border-subtle: rgba(255, 107, 107, 0.35);

    --bs-link-color: var(--color-link);
    --bs-link-color-rgb: 0, 174, 239;
    --bs-link-hover-color: var(--color-link-hover);
    --bs-link-hover-color-rgb: 77, 196, 245;
    --bs-heading-color: var(--color-heading);
}

/* ==========================================================================
   5. Base elements
   ========================================================================== */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-snug);
    margin-bottom: 0.5em;
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: var(--ls-tight); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
h5, .h5 { font-size: var(--fs-h5); font-weight: var(--fw-bold); letter-spacing: 0; }
h6, .h6 { font-size: var(--fs-h6); font-weight: var(--fw-bold); letter-spacing: 0; }

/* Headings on dark bars (heroes, footer, modal headers) keep the bar's white text */
:is(.text-white, .text-light, .bg-primary, .bg-dark, .text-bg-primary, .text-bg-dark, [data-surface="dark"],
    .hero-banner, .page-hero, .dictionary-header, .vocabulary-list-header, .exam-hero, .exam-play-hero,
    .footer-body, .stats-section, .info-card, .practice-modal-header, .section-header,
    .usage-section-header, .family-group-header, .cookie-consent-banner, .conv-wa-topbar)
    :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    color: inherit;
}

/* Full-width dark bars flip the text tokens, so lead text, muted text and links inside stay readable */
:is([data-surface="dark"], .bg-primary, .text-bg-primary, .bg-dark, .text-bg-dark,
    .hero-banner, .page-hero, .dictionary-header, .vocabulary-list-header, .exam-hero, .exam-play-hero,
    .footer-body, .practice-modal-header, .cookie-consent-banner, .conv-wa-topbar) {
    --color-heading: var(--ll-white);
    --color-text-primary: var(--ll-white);
    --color-text-secondary: rgba(255, 255, 255, 0.88);
    --color-text-muted: rgba(255, 255, 255, 0.72);
    --color-link: var(--ll-white);
    --color-link-hover: var(--ll-amber);
    --bs-secondary-color: rgba(255, 255, 255, 0.88);
}

p { margin-bottom: 1rem; }
.lead {
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-text-secondary);
}
small, .small { font-size: var(--fs-sm); }
.text-muted, .text-body-secondary { color: var(--color-text-secondary) !important; }

a { color: var(--color-link); text-underline-offset: 0.18em; }
a:hover { color: var(--color-link-hover); }

:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

::selection { background: rgba(0, 174, 239, 0.22); }

/* ==========================================================================
   6. Layout primitives — use on new pages
   ========================================================================== */
.ll-section { padding-block: var(--section-y); }
.ll-section-sm { padding-block: var(--section-y-sm); }
.ll-section-alt { background: var(--color-surface); }

.ll-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-heading);
    background: rgba(0, 174, 239, 0.12);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.85rem;
    margin-bottom: var(--space-4);
}

.ll-display {
    font-size: var(--fs-display);
    font-weight: var(--fw-heavy);
    line-height: var(--lh-tight);
    letter-spacing: -0.035em;
    color: var(--color-heading);
}
.ll-display .ll-accent,
.ll-accent-text { color: var(--ll-teal); }

.ll-section-title {
    color: var(--color-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-heavy);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-2);
}
.ll-section-sub {
    color: var(--color-text-secondary);
    max-width: var(--measure);
    margin-bottom: var(--space-5);
}

.ll-prose { max-width: 46rem; }
.ll-prose p, .ll-prose li { line-height: 1.75; }
.ll-prose h2 { margin-top: 2.25rem; }
.ll-prose h3 { margin-top: 1.75rem; }

.ll-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
}

/* ==========================================================================
   7. Components shared by every page
   ========================================================================== */
.btn {
    --bs-btn-font-weight: var(--fw-bold);
    --bs-btn-border-radius: var(--radius-pill);
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--color-focus-ring);
}
.btn-sm { --bs-btn-padding-x: 0.85rem; --bs-btn-padding-y: 0.35rem; --bs-btn-font-size: var(--fs-sm); }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.85rem; --bs-btn-font-size: 1.05rem; }

.btn-primary {
    --bs-btn-color: var(--ll-white);
    --bs-btn-bg: var(--ll-deep-blue);
    --bs-btn-border-color: var(--ll-deep-blue);
    --bs-btn-hover-color: var(--ll-white);
    --bs-btn-hover-bg: var(--ll-sky);
    --bs-btn-hover-border-color: var(--ll-sky);
    --bs-btn-active-color: var(--ll-white);
    --bs-btn-active-bg: var(--ll-sky-700);
    --bs-btn-active-border-color: var(--ll-sky-700);
    --bs-btn-disabled-bg: var(--ll-deep-blue);
    --bs-btn-disabled-border-color: var(--ll-deep-blue);
}
.btn-secondary {
    --bs-btn-color: var(--ll-white);
    --bs-btn-bg: var(--ll-sky-700);
    --bs-btn-border-color: var(--ll-sky-700);
    --bs-btn-hover-color: var(--ll-white);
    --bs-btn-hover-bg: var(--ll-deep-blue);
    --bs-btn-hover-border-color: var(--ll-deep-blue);
    --bs-btn-active-bg: var(--ll-deep-blue);
    --bs-btn-active-border-color: var(--ll-deep-blue);
}
.btn-success {
    --bs-btn-color: var(--ll-white);
    --bs-btn-bg: var(--ll-teal-700);
    --bs-btn-border-color: var(--ll-teal-700);
    --bs-btn-hover-color: var(--ll-white);
    --bs-btn-hover-bg: #006E4D;
    --bs-btn-hover-border-color: #006E4D;
}
.btn-outline-primary {
    --bs-btn-color: var(--ll-deep-blue);
    --bs-btn-border-color: rgba(0, 51, 102, 0.35);
    --bs-btn-hover-color: var(--ll-white);
    --bs-btn-hover-bg: var(--ll-deep-blue);
    --bs-btn-hover-border-color: var(--ll-deep-blue);
    --bs-btn-active-bg: var(--ll-deep-blue);
    --bs-btn-active-border-color: var(--ll-deep-blue);
}
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: var(--ll-sky-700);
    --bs-btn-border-color: var(--ll-sky-700);
    --bs-btn-hover-bg: var(--ll-sky);
    --bs-btn-hover-border-color: var(--ll-sky);
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--ll-sky);
    --bs-btn-border-color: rgba(0, 174, 239, 0.5);
    --bs-btn-hover-bg: var(--ll-sky-700);
    --bs-btn-hover-border-color: var(--ll-sky-700);
}

.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--ll-deep-blue) !important; }
.bg-light { background-color: var(--color-background-alt) !important; }
.border-primary { border-color: var(--color-primary) !important; }

.card {
    --bs-card-bg: var(--color-surface);
    --bs-card-border-color: var(--color-border);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
}

.badge { font-weight: var(--fw-bold); letter-spacing: 0.01em; }
/* Amber and light badges need dark text; Bootstrap leaves them white */
.badge.bg-warning, .badge.text-bg-warning, .badge.bg-light { color: var(--ll-deep-blue) !important; }

.form-control,
.form-select {
    border-color: var(--color-border-strong);
    border-radius: var(--radius-md);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ll-sky);
    box-shadow: 0 0 0 0.25rem var(--color-focus-ring);
}

.pagination {
    --bs-pagination-color: var(--color-primary);
    --bs-pagination-hover-color: var(--color-primary);
    --bs-pagination-active-bg: var(--ll-deep-blue);
    --bs-pagination-active-border-color: var(--ll-deep-blue);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--color-focus-ring);
}

.alert { border-radius: var(--radius-md); }