/* ============================================================
   RLDTheme — design tokens
   Source: rld-integral-design.md
   Do NOT put any rules here — only :root{} token declarations.
   ============================================================ */

:root {

    /* ── Colors — dark sections (default) ─────────────────── */
    --color-bg:           #1B2D43;   /* neutral — dominant navy backdrop */
    --color-surface:      #243A56;   /* surface — elevated navy panels */
    --color-text:         #ffffff;   /* primary text on dark bg */
    --color-muted:        rgba(255, 255, 255, 0.65); /* secondary copy on dark bg */
    --color-dim:          rgba(255, 255, 255, 0.40); /* placeholders / disabled on dark bg */
    --color-border:       #575756;   /* tertiary — structural borders */
    --color-border-inner: #464645;   /* inner dividers */
    --color-row:          #1F3349;   /* alternating row tint */
    --color-elevated:     #243A56;   /* elevated surface */
    --color-card-bg:      #243A56;   /* cards on dark sections */
    --color-accent:       #2BD698;   /* Gestión Integral green */
    --color-accent-subtle: rgba(43, 214, 152, 0.06);
    --color-accent-glow:  rgba(43, 214, 152, 0.15);
    --color-overlay:      rgba(27, 45, 67, 0.85);
    --color-error:        #CE4141;   /* destructive / validation errors */

    /* ── Colors — light sections (.sec--light) ─────────────── */
    --color-bg-alt:       #ffffff;   /* secondary — alternate white sections */
    --color-text-alt:     #1B2D43;   /* primary text on white bg */
    --color-muted-alt:    #575756;   /* secondary copy on white bg (tertiary gray) */
    --color-dim-alt:      #8A8A89;   /* placeholders / disabled on white bg */
    --color-border-alt:   #575756;   /* borders on white sections */
    --color-card-bg-alt:  #F4F6F8;   /* subtle card tint on white sections */

    /* ── Colors — header + heroes (light chrome) ───────────── */
    --color-chrome-bg:      var(--color-bg-alt);
    --color-chrome-text:    var(--color-text-alt);
    --color-chrome-muted:   var(--color-muted-alt);
    --color-chrome-dim:     var(--color-dim-alt);
    --color-chrome-border:  var(--color-border-alt);
    --color-chrome-surface: var(--color-card-bg-alt);
    --color-divider-subtle: color-mix(in srgb, var(--color-border-alt) 10%, transparent);
    /* Editorial center spine — same weight as header / subtle site borders */
    --color-spine:          var(--color-divider-subtle);
    --color-spine-on-dark:  color-mix(in srgb, var(--color-text) 10%, transparent);

    /* Button colors */
    --color-btn-bg:       #2BD698;   /* .btn--primary */
    --color-btn-hover:    #24BF89;
    --color-btn-active:   #1FA77A;
    --color-btn-text:     #1B2D43;   /* text on green / white buttons */

    /* ── Typography — Families ───────────────────────────── */
    --font-primary:       'General Sans', system-ui, -apple-system, sans-serif;
    --font-secondary:     'General Sans', system-ui, -apple-system, sans-serif;

    /* ── Typography — Scale (html base = 10px; clamp = fluid) ─ */
    --text-xs:            1.2rem;    /* 12px — labels, captions */
    --text-sm:            1.4rem;    /* 14px — small UI copy */
    --text-base:          1.6rem;    /* 16px — body */
    --text-md:            1.8rem;    /* 18px — lead / emphasis */
    --text-lg:            2rem;      /* 20px — subheads, large UI */
    --text-xl:            2.4rem;    /* 24px — h4 scale */
    --text-2xl:           clamp(3.6rem, 3.5vw + 1.4rem, 7.2rem); /* display h2 — hero + CTA only */
    --text-h2-content:    clamp(3rem, 2.4vw + 1.2rem, 4.8rem);     /* 30–48px — section headings */
    --text-h2-display:    var(--text-2xl); /* alias — hero + CTA headings */
    --text-3xl:           4.8rem;    /* 48px — page title scale */
    --text-hero:          clamp(4rem, 4.2vw + 1.4rem, 8.8rem);  /* hero only — 40–88px */
    --text-display:       var(--text-hero); /* alias — prefer --text-hero */
    --text-hero-sub:      clamp(2.2rem, 1.6vw + 1.2rem, 3.6rem); /* hero h2 — tight semibold subhead */
    --text-hero-lead:     var(--text-md);    /* 18px — hero lead (sanity body) */
    --text-wordmark:      clamp(3.8rem, 3.5vw + 1.2rem, 6rem); /* 38–60px — sanity 60px tier */

    /* ── Typography — Heading Scale ─────────────────────────── */
    --text-h1:            var(--text-3xl);   /* 48px — inner page titles */
    --text-h2:            var(--text-h2-content); /* content section headings */
    --text-h3:            clamp(2.4rem, 1.8vw + 1rem, 3.2rem);   /* 24–32px */
    --text-h4:            2.4rem;    /* 24px */
    --text-h5:            2rem;      /* 20px */
    --text-h6:            1.8rem;    /* 18px */

    /* ── Typography — Weights ────────────────────────────── */
    --weight-light:       300;
    --weight-regular:     400;
    --weight-medium:      500;
    --weight-semibold:    600;
    --weight-bold:        700;
    --weight-hero:        var(--weight-regular);   /* 400 — sanity.io display */
    --weight-hero-sub:    var(--weight-regular); /* 400 — hero h2 subhead */
    --weight-h1:          var(--weight-regular);   /* 400 — sanity.io page titles */
    --weight-h2:          var(--weight-regular);   /* 400 — sanity.io heading-lg */
    --weight-wordmark:    var(--weight-regular);   /* 400 — sanity 60px tier */

    /* ── Typography — Tracking (sanity.io extraction) ───── */
    --tracking-tight:     -0.03em;
    --tracking-normal:    0;
    --tracking-wide:      0.04em;
    --tracking-wider:     0.06em;
    --tracking-hero:      -0.04em;   /* display 112px */
    --tracking-hero-sub:  -0.025em;  /* hero h2 — tight marketing subhead */
    --tracking-h1:        -0.01em;   /* sanity heading tier */
    --tracking-h2:        -0.035em;  /* heading-lg 72px */
    --tracking-wordmark:  -0.035em;  /* 60px tier */

    /* ── Typography — Leading (sanity.io extraction) ────── */
    --leading-hero:       1.05;      /* hero h1 — relaxed stack (40–88px scale) */
    --leading-hero-sub:   1.15;      /* hero h2 — tight two-line subhead */
    --leading-h1:         1.13;      /* sanity heading tier */
    --leading-h2:         1.05;      /* heading-lg 72px */
    --leading-hero-lead:  1.5;       /* sanity 18px body */
    --leading-wordmark:   0.8;       /* sanity 60px tier */
    --leading-tight:      1.1;
    --leading-normal:     1.4;
    --leading-relaxed:    1.6;

    /* ── Spacing ─────────────────────────────────────────── */
    --gap-xxxs:           0.3rem;    /* 3px */
    --gap-xxs:            0.6rem;    /* 6px */
    --gap-xs:             1rem;      /* 10px */
    --gap-sm:             1.6rem;    /* 16px */
    --gap-md:             4.8rem;    /* 48px */
    --gap-lg:             11.2rem;   /* 112px — rhythm with --text-hero max */
    --gap-xl:             18.8rem;   /* 188px */
    --gap-xxl:            24rem;

    /* ── Layout ──────────────────────────────────────────── */
    --side-pad:           clamp(1.6rem, 0.5rem + 3vw, 4.8rem);
    --side-pad-mobile:    1.6rem;
    --max-width:          128rem;    /* 1280px — desktop-wide content rail */
    --content-top:        11.2rem;   /* 112px — clearance for large display type */
    --content-band-w:       20px;    /* content edge frame — band width L/R */
    --content-band-w-mobile: 8px;    /* content edge frame — narrower on mobile */
    --content-band-major:   20px;    /* ruler — major tick spacing (full width) */
    --content-band-minor:   5px;     /* ruler — minor tick spacing */
    --content-band-minor-len: 55%;   /* ruler — minor tick length (from outer edge) */
    --section-pad-t:      9.6rem;
    --section-pad-b:      9.6rem;

    /* ── Components ──────────────────────────────────────── */
    --radius:             11px;
    --radius-sm:          4px;
    --radius-lg:          11px;
    --doc-corner-cut:     11px;   /* logo doc chamfer — top-right diagonal clip */
    --space-btn:          0.8rem 3.2rem;
    --border-width:       1px;
    --soluciones-rhythm:  clamp(4.8rem, 5vw, 7.2rem);

    /* ── Transitions ─────────────────────────────────────── */
    --transition-fast:    150ms ease;
    --transition-base:    250ms ease;
    --transition-slow:    400ms ease;

    /* ── Z-index ─────────────────────────────────────────── */
    --z-header:           1000;
    --z-mobile-nav:       1100;
    --z-modal:            1200;
    --z-tooltip:          1300;

    /* ── Header ──────────────────────────────────────────── */
    --header-h:           68px;
}

/* Tablet — spacing must descend or stay flat toward mobile (never inflate) */
@media (max-width: 1024px) {
    :root {
        --gap-md:         3.2rem;
        --gap-lg:         7.2rem;
        --gap-xl:         9.6rem;
        --gap-xxl:        12rem;
        --section-pad-t:  7.2rem;
        --section-pad-b:  7.2rem;
    }
}

/* Mobile — MUST be ≤ tablet values (Phase 8 spacing contract) */
@media (max-width: 768px) {
    :root {
        --text-hero:      clamp(3.6rem, 6vw + 1rem, 5.6rem);    /* ESTIMATED — 36–56px */
        --text-h1:        3.6rem;    /* 36px */
        --text-h2:        clamp(2.8rem, 3.2vw + 1rem, 3.6rem);     /* content h2 mobile */
        --text-h2-display: clamp(3rem, 4vw + 1.2rem, 4.4rem);   /* display h2 mobile — hero + CTA */
        --text-wordmark:  clamp(3.2rem, 6vw + 1rem, 4.8rem);     /* ESTIMATED — 32–48px */
        --content-top:    7.2rem;    /* 72px — rhythm with --text-h2 mobile max */
        --section-pad-t:  6.4rem;    /* bumped — still ≤ tablet 7.2 */
        --section-pad-b:  6.4rem;
        --gap-md:         3.2rem;    /* flat with tablet */
        --gap-lg:         6.4rem;    /* bumped — still < tablet 7.2 */
        --gap-xl:         8rem;
        --gap-xxl:        8rem;
    }
}