/*
 * Call Jero design tokens (F24 A1). All components read these variables; no Bootstrap, no Tailwind.
 * Naming: --cj-{category}-{name}. Change values here, never hard-code colors in components.
 */
:root {
    color-scheme: light dark;

    /* Brand: logo red #d82148 (fixed, from the Call Jero logo). Use --cj-color-brand only for the logo/brand marks. */
    --cj-color-brand: #d82148;

    /* Colors: warm "masa" background, logo-red primary, nopal-green accent */
    --cj-color-bg: #ffffff;
    --cj-color-surface: #ffffff;
    --cj-color-surface-muted: #fbefe2;
    --cj-color-text: #2b2118;
    --cj-color-text-muted: #6e5f52;
    --cj-color-border: #eadbc8;
    --cj-color-primary: var(--cj-color-brand); /* white text on it: 5.0:1 */
    --cj-color-primary-hover: #b5183a;
    --cj-color-on-primary: #ffffff;
    --cj-color-accent: #0f766e;
    --cj-color-on-accent: #ffffff;
    --cj-color-danger: #b91c1c;
    --cj-color-focus: #2563eb;

    /* Typography */
    --cj-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cj-font-size-sm: 0.875rem;
    --cj-font-size-md: 1rem;
    --cj-font-size-lg: 1.25rem;
    --cj-font-size-xl: 1.75rem;
    --cj-font-size-2xl: 2.25rem;
    --cj-font-weight-regular: 400;
    --cj-font-weight-semibold: 600;
    --cj-font-weight-bold: 700;
    --cj-line-height: 1.5;
    --cj-line-height-tight: 1.2;

    /* Spacing (4 px grid) */
    --cj-space-1: 0.25rem;
    --cj-space-2: 0.5rem;
    --cj-space-3: 0.75rem;
    --cj-space-4: 1rem;
    --cj-space-5: 1.5rem;
    --cj-space-6: 2rem;
    --cj-space-8: 3rem;

    /* Shape and depth */
    --cj-radius-sm: 0.375rem;
    --cj-radius-md: 0.75rem;
    --cj-radius-lg: 1.25rem;
    --cj-radius-pill: 999px;
    --cj-shadow-sm: 0 1px 2px rgb(43 33 24 / 0.08);
    --cj-shadow-md: 0 4px 16px rgb(43 33 24 / 0.10);

    /* Layout and motion */
    --cj-content-width: 40rem;
    --cj-tap-target: 2.75rem;
    --cj-transition-fast: 120ms ease-out;
}

@media (prefers-color-scheme: dark) {
    :root {
        --cj-color-bg: #1c1612;
        --cj-color-surface: #2a211b;
        --cj-color-surface-muted: #342922;
        --cj-color-text: #f7ede3;
        --cj-color-text-muted: #c9b8a8;
        --cj-color-border: #4a3b31;
        /* Lighter logo red for dark backgrounds (5.1:1 against --cj-color-bg); the brand mark keeps #d82148 */
        --cj-color-primary: #f0506f;
        --cj-color-primary-hover: #f47a92;
        --cj-color-on-primary: #1c1612;
        --cj-color-accent: #2dd4bf;
        --cj-color-on-accent: #1c1612;
        --cj-color-danger: #f87171;
        --cj-color-focus: #93c5fd;
        --cj-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
        --cj-shadow-md: 0 4px 16px rgb(0 0 0 / 0.45);
    }
}