/*
 * Design tokens.
 *
 * The shared palette / type-scale for Carfalo. Anything that needs a
 * hard-coded colour, font, or spacing should reach for these variables.
 * Bootstrap utility classes are still encouraged; tokens cover the
 * gaps and the brand surface.
 */

:root {
    /* Brand palette ---------------------------------------------------- */
    --color-brand-primary:        #0d6efd;
    --color-brand-primary-dark:   #0b5ed7;
    --color-brand-accent:         #ffc107;
    --color-brand-ink:            #0b1d36;
    --color-brand-surface:        #ffffff;
    --color-brand-surface-muted:  #f6f8fb;
    --color-brand-divider:        #e1e6ee;
    --color-brand-success:        #198754;
    --color-brand-warning:        #ffc107;
    --color-brand-danger:         #dc3545;

    /* Text ------------------------------------------------------------- */
    --color-text-default:         #1f2937;
    --color-text-muted:           #6b7280;
    --color-text-inverse:         #ffffff;
    --link-color:                 var(--color-brand-primary);
    --link-hover-color:           var(--color-brand-primary-dark);

    /* Type-scale (1.250 minor third) ---------------------------------- */
    --font-family-sans:           system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono:           ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --font-size-xs:               0.75rem;
    --font-size-sm:               0.875rem;
    --font-size-base:             1rem;
    --font-size-lg:               1.125rem;
    --font-size-xl:               1.5rem;
    --font-size-2xl:              1.875rem;

    /* Spacing scale (4px base) ---------------------------------------- */
    --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;

    /* Elevation / shape ----------------------------------------------- */
    --shadow-sm:                  0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md:                  0 4px 12px rgba(15, 23, 42, 0.08);
    --radius-sm:                  0.25rem;
    --radius-md:                  0.5rem;
    --radius-lg:                  1rem;

    /* Focus ring (WCAG 2.4.7) ----------------------------------------- */
    --focus-ring:                 0 0 0 3px rgba(13, 110, 253, 0.35);
}

/* Dark mode — explicit toggle or system preference ------------------- */
[data-theme="dark"] {
    --color-brand-primary:        #4dabf7;
    --color-brand-primary-dark:   #339af0;
    --color-brand-accent:         #ffd43b;
    --color-brand-ink:            #0a1220;
    --color-brand-surface:        #1a2234;
    --color-brand-surface-muted:  #121826;
    --color-brand-divider:        #2d3748;
    --color-brand-success:        #51cf66;
    --color-brand-warning:        #ffd43b;
    --color-brand-danger:         #ff6b6b;

    --color-text-default:         #e2e8f0;
    --color-text-muted:           #94a3b8;
    --color-text-inverse:         #f8fafc;
    --link-color:                 #74c0fc;
    --link-hover-color:           #a5d8ff;

    --shadow-sm:                  0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md:                  0 4px 12px rgba(0, 0, 0, 0.45);
    --focus-ring:                 0 0 0 3px rgba(77, 171, 247, 0.45);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-brand-primary:        #4dabf7;
        --color-brand-primary-dark:   #339af0;
        --color-brand-accent:         #ffd43b;
        --color-brand-ink:            #0a1220;
        --color-brand-surface:        #1a2234;
        --color-brand-surface-muted:  #121826;
        --color-brand-divider:        #2d3748;
        --color-brand-success:        #51cf66;
        --color-brand-warning:        #ffd43b;
        --color-brand-danger:         #ff6b6b;

        --color-text-default:         #e2e8f0;
        --color-text-muted:           #94a3b8;
        --color-text-inverse:         #f8fafc;
        --link-color:                 #74c0fc;
        --link-hover-color:           #a5d8ff;

        --shadow-sm:                  0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md:                  0 4px 12px rgba(0, 0, 0, 0.45);
        --focus-ring:                 0 0 0 3px rgba(77, 171, 247, 0.45);
    }
}

/* Skip link --- WCAG 2.4.1: bypass blocks ------------------------------ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-2);
    background: var(--color-brand-ink);
    color: var(--color-text-inverse);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: 1100;
}
.skip-link:focus {
    left: var(--space-2);
}

/* Visible focus outline -------------------------------------------------- */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Sponsored / privacy callouts ------------------------------------------ */
.sponsored-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-brand-accent);
    color: var(--color-brand-ink);
}