/*
 * Django serves this file as is: keep it plain CSS. A renamed or removed token
 * breaks every site that uses ui/. Components use the semantic tokens, never the
 * palette steps.
 */

:root {
    /* ===================================================================
     * Fluid Type Scale (Utopia)
     *
     * 320px/16px (1.2) → 1200px/18px (1.25), steps -2..5
     * =================================================================== */
    --step--2: clamp(0.6944rem, calc(0.6852rem + 0.0465vw), 0.72rem);
    --step--1: clamp(0.8333rem, calc(0.8091rem + 0.1212vw), 0.9rem);
    --step-0: clamp(1rem, calc(0.9545rem + 0.2273vw), 1.125rem);
    --step-1: clamp(1.2rem, calc(1.125rem + 0.375vw), 1.4063rem);
    --step-2: clamp(1.44rem, calc(1.3244rem + 0.5778vw), 1.7578rem);
    --step-3: clamp(1.728rem, calc(1.5574rem + 0.8532vw), 2.1973rem);
    --step-4: clamp(2.0736rem, calc(1.8289rem + 1.2236vw), 2.7466rem);
    --step-5: clamp(2.4883rem, calc(2.1447rem + 1.718vw), 3.4332rem);

    /* ===================================================================
     * Fluid Space Scale (Utopia)
     * =================================================================== */
    --space-3xs: clamp(0.25rem, calc(0.2386rem + 0.0568vw), 0.2813rem);
    --space-2xs: clamp(0.5rem, calc(0.4773rem + 0.1136vw), 0.5625rem);
    --space-xs: clamp(0.75rem, calc(0.7159rem + 0.1705vw), 0.8438rem);
    --space-s: clamp(1rem, calc(0.9545rem + 0.2273vw), 1.125rem);
    --space-m: clamp(1.5rem, calc(1.4318rem + 0.3409vw), 1.6875rem);
    --space-l: clamp(2rem, calc(1.9091rem + 0.4545vw), 2.25rem);
    --space-xl: clamp(3rem, calc(2.8636rem + 0.6818vw), 3.375rem);
    --space-2xl: clamp(4rem, calc(3.8182rem + 0.9091vw), 4.5rem);
    --space-3xl: clamp(6rem, calc(5.7273rem + 1.3636vw), 6.75rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, calc(0.1364rem + 0.5682vw), 0.5625rem);
    --space-2xs-xs: clamp(0.5rem, calc(0.375rem + 0.625vw), 0.8438rem);
    --space-xs-s: clamp(0.75rem, calc(0.6136rem + 0.6818vw), 1.125rem);
    --space-s-m: clamp(1rem, calc(0.75rem + 1.25vw), 1.6875rem);
    --space-m-l: clamp(1.5rem, calc(1.2273rem + 1.3636vw), 2.25rem);
    --space-l-xl: clamp(2rem, calc(1.5rem + 2.5vw), 3.375rem);
    --space-xl-2xl: clamp(3rem, calc(2.4545rem + 2.7273vw), 4.5rem);
    --space-2xl-3xl: clamp(4rem, calc(3rem + 5vw), 6.75rem);

    /* Custom pairs */
    --space-s-l: clamp(1rem, calc(0.5455rem + 2.2727vw), 2.25rem);

    /* ===================================================================
     * Typography
     * =================================================================== */
    --font-body: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Tracking (letter-spacing) — used heavily by mono labels */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.18em;

    /* ===================================================================
     * Base Palette — HSL ladders (theme-agnostic raw values).
     *
     * Direction: 50 = lightest, 950 = darkest (matches Tailwind / our
     * existing convention). Section components reference SEMANTIC tokens
     * below, not these palette steps directly.
     * =================================================================== */

    /* Blue — anchored on brand #183b78 ≈ hsl(216 67% 28%) at -800 */
    --color-blue-50: hsl(214 100% 97%);
    --color-blue-100: hsl(214 95% 93%);
    --color-blue-200: hsl(214 86% 84%);
    --color-blue-300: hsl(214 80% 72%);
    --color-blue-400: hsl(215 72% 58%);
    --color-blue-500: hsl(216 72% 47%);
    --color-blue-600: hsl(216 72% 39%);
    --color-blue-700: hsl(216 70% 33%);
    --color-blue-800: hsl(216 67% 28%); /* brand anchor #183b78 */
    --color-blue-900: hsl(216 65% 23%);
    --color-blue-950: hsl(217 63% 15%);

    /* Gray — warm-tinted at the light end, near-black at the dark end.
     * Extended versus app/frontend so the dark surface ladder has the
     * stops we need (-950, -975) without inventing custom hues. */
    --color-gray-50: hsl(60 18% 96%); /* ≈ #f7f7f2 (light page bg) */
    --color-gray-100: hsl(55 12% 91%);
    --color-gray-200: hsl(50 8% 82%);
    --color-gray-300: hsl(45 6% 70%);
    --color-gray-400: hsl(45 5% 56%);
    --color-gray-500: hsl(40 5% 46%);
    --color-gray-600: hsl(40 4% 38%);
    --color-gray-700: hsl(35 5% 28%);
    --color-gray-800: hsl(30 6% 20%);
    --color-gray-900: hsl(30 6% 15%);
    --color-gray-950: hsl(220 14% 7%); /* dark surface */
    --color-gray-975: hsl(220 18% 4%); /* dark page background */

    /* ===================================================================
     * Borders, Radii, Shadows, Motion — shared across themes
     * =================================================================== */
    --border-thin: 1px;
    --border-thick: 2px;

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.05);
    --shadow-md: 0 4px 6px hsl(0 0% 0% / 0.07);
    --shadow-lg: 0 10px 15px hsl(0 0% 0% / 0.1);

    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;

    /* ===================================================================
     * Measures (max-width constraints for page-level content)
     * =================================================================== */
    --measure-prose: 40rem; /* ~640px — optimal reading line length */
    --measure-form: 48rem; /* ~768px — forms, compact UIs */
    --measure-content: 72rem; /* ~1152px — data tables, dashboards */
    --measure-wide: 80rem; /* ~1280px — page wrap */

    /* WhatsApp's own green, the same in every theme: only behind its white mark. */
    --color-whatsapp-brand: #25d366;
}

/* =====================================================================
 * Semantic tokens — Dark theme (DEFAULT for marketing)
 *
 * `:where(:root)` keeps the dark block at zero specificity at the root,
 * so a `.light` ancestor wins by class specificity without `!important`.
 * The marketing BaseLayout mounts `class="dark"` explicitly on <html>;
 * the root selector here is a safety net so tokens resolve even if the
 * class is ever absent.
 * ===================================================================== */
:where(:root),
.dark {
    /* Page & surfaces */
    --color-background: var(--color-gray-975);
    --color-surface: var(--color-gray-950);
    --color-surface-raised: var(--color-gray-900);

    /* Text — four tones, matching the design's hierarchy.
     *
     * All four pass WCAG AA (4.5:1 minimum for normal text) on the
     * default --color-background. text-faint is the lowest contrast
     * tier and should only be used for short, large-ish labels
     * (mono uppercase, --step--2 or larger).
     *
     * Computed ratios on background (gray-975, L=4%):
     *   normal  ~14.0:1
     *   muted   ~9.0:1
     *   subtle  ~5.7:1
     *   faint   ~4.6:1   (was 2.2:1 before the lift)
     */
    --color-text-normal: hsl(220 16% 92%);
    --color-text-muted: hsl(220 10% 70%);
    --color-text-subtle: hsl(220 10% 62%);
    --color-text-faint: hsl(220 8% 52%);

    /* Links */
    --color-link: var(--color-blue-300);
    --color-link-hover: var(--color-blue-200);

    /* Borders */
    --color-border-muted: hsl(220 10% 18%);
    --color-border-accent: hsl(220 10% 28%);

    /* Neutral role */
    --color-neutral-fill-muted: var(--color-gray-950);
    --color-neutral-fill-accent: var(--color-gray-900);
    --color-neutral-fill-vivid: var(--color-gray-100);
    --color-neutral-border-muted: hsl(220 10% 18%);
    --color-neutral-border-accent: hsl(220 10% 28%);
    --color-neutral-on-muted: hsl(220 16% 92%);
    --color-neutral-on-accent: hsl(220 16% 92%);
    --color-neutral-on-vivid: var(--color-gray-950);

    /* Primary role — electric blue on dark */
    --color-primary-fill-muted: hsl(216 72% 12%);
    --color-primary-fill-accent: hsl(216 72% 22%);
    --color-primary-fill-vivid: var(--color-blue-400);
    --color-primary-border-muted: hsl(216 72% 22%);
    --color-primary-border-accent: var(--color-blue-500);
    --color-primary-on-muted: var(--color-blue-200);
    --color-primary-on-accent: var(--color-blue-100);
    --color-primary-on-vivid: var(--color-gray-975);

    /* Focus ring */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--color-primary-fill-vivid);

    /* Aperture (engine chamber optical core) — see EngineSection.astro.
     * Faint = static outer/middle rings; active = breathing reactive
     * ring + iris + core glow; tick = chamber chrome calibration marks. */
    --color-aperture-ring-faint: var(--color-blue-300);
    --color-aperture-ring-active: var(--color-blue-400);
    --color-aperture-tick: var(--color-primary-border-accent);

    /* Aperture housing — recessed-lens portal background.
     * Translucent so the section's surface-sunken bleeds through; the
     * blend is what reads as "inside an instrument" rather than "opaque
     * panel." */
    --color-aperture-housing-inner: hsl(216 60% 14% / 0.55);
    --color-aperture-housing-outer: hsl(216 45% 5% / 0.85);

    /* Categorical data palette — ordered ramp for distinguishing
     * adjacent series in diagrams (cohort lanes, risk tiers). */
    --color-data-1: hsl(216 85% 76%);
    --color-data-2: hsl(216 75% 62%);
    --color-data-3: hsl(216 65% 48%);
    --color-data-4: hsl(216 48% 36%);

    /* Coloured outer glow — focal-element ambient shadow. Distinct
     * from --shadow-* drop shadows: large radius, no offset, primary
     * hue, low alpha for atmospheric bleed. */
    --shadow-glow-primary: 0 0 48px hsl(216 65% 25% / 0.4);

    /* Code snippets */
    --color-code-fill: var(--color-gray-950);
    --color-code-border: hsl(220 10% 18%);
    --color-code-on: hsl(220 16% 92%);

    /* ===================================================================
     * Risk-band tokens — owned by marketing for now.
     * TODO: promote to app/frontend tokens when the product side
     * consumes them.
     * =================================================================== */
    --color-risk-critical: hsl(0 70% 55%);
    --color-risk-high: hsl(15 70% 55%);
    --color-risk-medium: hsl(40 65% 55%);
    --color-risk-low: hsl(140 50% 45%);

    /* On-tone overlays — text colour to use when sitting on top of the
     * risk-band fills above. Critical/High/Medium are bright enough to
     * need dark on-tone; Low (green) reads better with light on-tone. */
    --color-on-risk-critical: var(--color-gray-975);
    --color-on-risk-high: var(--color-gray-975);
    --color-on-risk-medium: var(--color-gray-975);
    --color-on-risk-low: var(--color-gray-50);

    /* Categorical-data step 5 — extends data-1..4 for the population
     * scatter visualisation on /como-funciona. */
    --color-data-5: hsl(216 35% 30%);

    /* Preliminary-data marker — used to flag figures from the in-flight
     * prospective study (e.g. the −19% intervention reduction).
     *
     * Opaque fill (was translucent) so the contrast doesn't depend on
     * the surface underneath. Computed ratio of preliminary-on (L=90%)
     * on preliminary-fill (L=22%) ≈ 8.4:1 — clears WCAG AA for normal
     * text. */
    --color-preliminary-fill: hsl(40 55% 22%);
    --color-preliminary-border: hsl(40 60% 50%);
    --color-preliminary-on: hsl(40 90% 90%);

    /* Sticky anchor-nav height — used by /como-funciona's hero anchor
     * links to offset scroll position so jump-links don't land under
     * the bar. */
    --anchor-nav-height: 3rem;
}

/* =====================================================================
 * Semantic tokens — Light theme. The user can toggle into this via the
 * theme switch in SiteHeader; preference is persisted in localStorage
 * and bootstrapped synchronously in BaseLayout to avoid a flash.
 * ===================================================================== */
.light {
    --color-background: var(--color-gray-50);
    --color-surface: hsl(0 0% 100%);
    --color-surface-raised: hsl(0 0% 100%);

    --color-text-normal: var(--color-gray-900);
    --color-text-muted: var(--color-gray-600);
    --color-text-subtle: var(--color-gray-500);
    --color-text-faint: var(--color-gray-400);

    --color-link: var(--color-blue-700);
    --color-link-hover: var(--color-blue-800);

    --color-border-muted: var(--color-gray-200);
    --color-border-accent: var(--color-gray-400);

    --color-neutral-fill-muted: var(--color-gray-50);
    --color-neutral-fill-accent: var(--color-gray-100);
    --color-neutral-fill-vivid: var(--color-gray-900);
    --color-neutral-border-muted: var(--color-gray-200);
    --color-neutral-border-accent: var(--color-gray-400);
    --color-neutral-on-muted: var(--color-gray-900);
    --color-neutral-on-accent: var(--color-gray-700);
    --color-neutral-on-vivid: white;

    --color-primary-fill-muted: var(--color-blue-50);
    --color-primary-fill-accent: var(--color-blue-100);
    --color-primary-fill-vivid: var(--color-blue-800);
    --color-primary-border-muted: var(--color-blue-200);
    --color-primary-border-accent: var(--color-blue-600);
    --color-primary-on-muted: var(--color-blue-900);
    --color-primary-on-accent: var(--color-blue-900);
    --color-primary-on-vivid: white;

    --focus-ring-color: var(--color-primary-fill-vivid);

    /* Aperture (engine chamber) — anchored to the deep brand blue so
     * the optic still reads as an instrument on the white surface. */
    --color-aperture-ring-faint: var(--color-blue-600);
    --color-aperture-ring-active: var(--color-blue-700);
    --color-aperture-tick: var(--color-primary-border-accent);
    --color-aperture-housing-inner: hsl(216 60% 92% / 0.85);
    --color-aperture-housing-outer: hsl(216 45% 80% / 0.6);

    /* Categorical data palette — same hue ramp, darker steps for
     * adequate contrast against the white surface. */
    --color-data-1: hsl(216 75% 32%);
    --color-data-2: hsl(216 70% 44%);
    --color-data-3: hsl(216 60% 58%);
    --color-data-4: hsl(216 45% 70%);
    --color-data-5: hsl(216 30% 82%);

    --shadow-glow-primary: 0 0 36px hsl(216 70% 60% / 0.25);

    --color-code-fill: var(--color-gray-100);
    --color-code-border: var(--color-gray-200);
    --color-code-on: var(--color-gray-900);

    /* Risk bands — saturation lifted slightly so they pop on light. */
    --color-risk-critical: hsl(0 75% 48%);
    --color-risk-high: hsl(15 75% 48%);
    --color-risk-medium: hsl(40 70% 45%);
    --color-risk-low: hsl(140 55% 38%);
    --color-on-risk-critical: white;
    --color-on-risk-high: white;
    --color-on-risk-medium: var(--color-gray-975);
    --color-on-risk-low: white;

    /* Preliminary marker — muted sand on light. */
    --color-preliminary-fill: hsl(40 80% 92%);
    --color-preliminary-border: hsl(40 60% 55%);
    --color-preliminary-on: hsl(40 60% 22%);

    --anchor-nav-height: 3rem;
}

/* =====================================================================
 * Semantic tokens — Tutus (B2C home). Clara a propósito: Caritas es
 * oscura y las dos casas se distinguen al primer vistazo. El rol `accent`
 * (ámbar) es exclusivo de esta página: se gasta en el precio y en lo que
 * se quiere que la persona mire, nunca en texto corrido.
 * ===================================================================== */
.tutus {
    --color-background: hsl(48 27% 96%); /* papel */
    --color-surface: hsl(0 0% 100%);
    --color-surface-raised: hsl(0 0% 100%);

    /* subtle a 41 % de luminosidad: 4,5:1 también sobre las superficies
     * neutras (marfil), no solo sobre el papel. */
    --color-text-normal: var(--color-blue-900);
    --color-text-muted: hsl(216 20% 32%);
    --color-text-subtle: hsl(216 12% 41%);
    --color-text-faint: hsl(216 8% 52%);

    --color-link: var(--color-blue-700);
    --color-link-hover: var(--color-blue-800);

    --color-border-muted: hsl(45 12% 86%);
    --color-border-accent: hsl(216 30% 70%);

    --color-neutral-fill-muted: hsl(48 20% 93%);
    --color-neutral-fill-accent: hsl(48 16% 89%);
    --color-neutral-fill-vivid: var(--color-blue-900);
    --color-neutral-border-muted: hsl(45 12% 86%);
    --color-neutral-border-accent: hsl(216 30% 70%);
    --color-neutral-on-muted: var(--color-blue-900);
    --color-neutral-on-accent: var(--color-blue-900);
    --color-neutral-on-vivid: white;

    --color-primary-fill-muted: var(--color-blue-50);
    --color-primary-fill-accent: var(--color-blue-100);
    --color-primary-fill-vivid: var(--color-blue-800);
    --color-primary-border-muted: var(--color-blue-200);
    --color-primary-border-accent: var(--color-blue-600);
    --color-primary-on-muted: var(--color-blue-900);
    --color-primary-on-accent: var(--color-blue-900);
    --color-primary-on-vivid: white;

    /* Accent role — ámbar. Texto oscuro para contraste AA sobre papel;
     * relleno vivo para trazos y marcas, nunca para texto. */
    --color-accent-text: hsl(32 87% 32%);
    --color-accent-fill-vivid: hsl(38 75% 52%);
    --color-accent-fill-muted: hsl(38 80% 94%);
    --color-accent-border: hsl(38 70% 66%);
    --color-accent-on-vivid: var(--color-blue-950);

    /* WhatsApp's green, darkened to stand out on paper; only for its mark. */
    --color-whatsapp: hsl(142 70% 29%);

    --focus-ring-color: var(--color-primary-fill-vivid);
    --shadow-glow-primary: 0 0 36px hsl(216 70% 60% / 0.18);

    --color-code-fill: var(--color-gray-100);
    --color-code-border: var(--color-gray-200);
    --color-code-on: var(--color-gray-900);

    --color-data-1: hsl(216 75% 32%);
    --color-data-2: hsl(216 70% 44%);
    --color-data-3: hsl(216 60% 58%);
    --color-data-4: hsl(216 45% 70%);
    --color-data-5: hsl(216 30% 82%);

    --color-risk-critical: hsl(0 75% 48%);
    --color-risk-high: hsl(15 75% 48%);
    --color-risk-medium: hsl(40 70% 45%);
    --color-risk-low: hsl(140 55% 38%);
    --color-on-risk-critical: white;
    --color-on-risk-high: white;
    --color-on-risk-medium: var(--color-gray-975);
    --color-on-risk-low: white;

    --color-preliminary-fill: hsl(40 80% 92%);
    --color-preliminary-border: hsl(40 60% 55%);
    --color-preliminary-on: hsl(40 60% 22%);

    /* The closing band: navy on the paper. */
    --color-band-fill: var(--color-primary-fill-vivid);
    --color-band-on: var(--color-primary-on-vivid);

    --anchor-nav-height: 3rem;
    --header-height: 3.5rem;

    color-scheme: light;
}

/* =====================================================================
 * Semantic tokens — Tutus, dark. Night navy, not Corpus's near-black, so
 * the two houses still tell apart; the paper becomes the text and the
 * amber keeps its role. The class comes from the bootstrap in TutusLayout
 * and the toggle in TutusHeader; without it (no JavaScript) Tutus is light.
 * ===================================================================== */
.tutus.dark {
    --color-background: hsl(218 42% 8%);
    --color-surface: hsl(218 36% 12%);
    --color-surface-raised: hsl(218 32% 15%);

    --color-text-normal: hsl(48 27% 93%);
    --color-text-muted: hsl(216 22% 80%);
    --color-text-subtle: hsl(216 14% 70%);
    --color-text-faint: hsl(216 10% 60%);

    --color-link: var(--color-blue-300);
    --color-link-hover: var(--color-blue-200);

    --color-border-muted: hsl(218 26% 21%);
    --color-border-accent: hsl(216 22% 38%);

    --color-neutral-fill-muted: hsl(218 34% 14%);
    --color-neutral-fill-accent: hsl(218 30% 19%);
    --color-neutral-fill-vivid: hsl(48 27% 93%);
    --color-neutral-border-muted: hsl(218 26% 21%);
    --color-neutral-border-accent: hsl(216 22% 38%);
    --color-neutral-on-muted: hsl(48 27% 93%);
    --color-neutral-on-accent: hsl(48 27% 93%);
    --color-neutral-on-vivid: var(--color-blue-950);

    --color-primary-fill-muted: hsl(216 55% 17%);
    --color-primary-fill-accent: hsl(216 55% 24%);
    --color-primary-fill-vivid: var(--color-blue-300);
    --color-primary-border-muted: hsl(216 50% 28%);
    --color-primary-border-accent: var(--color-blue-200);
    --color-primary-on-muted: var(--color-blue-100);
    --color-primary-on-accent: var(--color-blue-50);
    --color-primary-on-vivid: var(--color-blue-950);

    --color-accent-text: hsl(38 85% 62%);
    --color-accent-fill-vivid: hsl(38 80% 55%);
    --color-accent-fill-muted: hsl(34 40% 14%);
    --color-accent-border: hsl(38 50% 38%);
    --color-accent-on-vivid: var(--color-blue-950);

    --color-whatsapp: hsl(142 60% 48%);

    --focus-ring-color: var(--color-primary-fill-vivid);
    --shadow-lg: 0 10px 24px hsl(220 50% 2% / 0.5);
    --shadow-glow-primary: 0 0 36px hsl(216 70% 40% / 0.3);

    --color-code-fill: hsl(218 36% 12%);
    --color-code-border: hsl(218 26% 21%);
    --color-code-on: hsl(48 27% 93%);

    --color-data-1: hsl(216 85% 76%);
    --color-data-2: hsl(216 75% 62%);
    --color-data-3: hsl(216 65% 48%);
    --color-data-4: hsl(216 48% 36%);
    --color-data-5: hsl(216 35% 30%);

    --color-risk-critical: hsl(0 70% 55%);
    --color-risk-high: hsl(15 70% 55%);
    --color-risk-medium: hsl(40 65% 55%);
    --color-risk-low: hsl(140 50% 45%);
    --color-on-risk-critical: var(--color-gray-975);
    --color-on-risk-high: var(--color-gray-975);
    --color-on-risk-medium: var(--color-gray-975);
    --color-on-risk-low: var(--color-gray-50);

    --color-preliminary-fill: hsl(40 55% 22%);
    --color-preliminary-border: hsl(40 60% 50%);
    --color-preliminary-on: hsl(40 90% 90%);

    /* A deeper navy than the page, so the band still closes it. */
    --color-band-fill: hsl(216 60% 15%);
    --color-band-on: hsl(48 27% 93%);

    color-scheme: dark;
}