/*
 * tokens.css - design tokens. Loaded first everywhere; nothing else resolves
 * without it.
 *
 * The --de-* scale is the shared Despertar / Chant Now design system. It keeps
 * the English names it has on dev.chantnow.com so both sites stay diffable
 * against one source of truth; the CSS classes that consume it stay in
 * Spanish, as the rest of this theme is.
 *
 * The --color-* / --fuente-* names at the bottom are a compatibility layer.
 * Every existing rule in the theme reads them, so the whole palette changes
 * here without another file being edited. They are removed once the section
 * system lands and the last rule stops referencing them.
 */

:root {

    /* ======================================================================
       PRIMARY PALETTE
       ====================================================================== */

    --de-indigo:        #2A2E6D;  /* Sacred Indigo */
    --de-lavender:      #7C8BFF;  /* Lavender Mist */
    --de-peach:         #FFB98A;  /* Golden Peach  */

    /* --- Accents --- */
    --de-violet:        #4F46E5;  /* Royal Violet */
    --de-coral:         #FF7A45;  /* Soft Coral   */

    /* --- Neutrals --- */
    --de-off-white:     #F1F1F1;
    --de-black:         #000000;
    --de-white:         #FFFFFF;

    /* --- Tint ramp in 20% steps --- */
    --de-indigo-20:     #D4D5E2;
    --de-indigo-40:     #A9ABC5;
    --de-indigo-60:     #7F82A7;
    --de-indigo-80:     #54588A;
    --de-lavender-20:   #E5E8FF;
    --de-lavender-40:   #CBD1FF;
    --de-lavender-60:   #B0B9FF;
    --de-lavender-80:   #96A2FF;
    --de-peach-20:      #FFF1E8;
    --de-peach-40:      #FFE3D0;
    --de-peach-60:      #FFD4B9;
    --de-peach-80:      #FFC6A1;


    /* ======================================================================
       SEMANTIC ROLES - what components actually reference
       ====================================================================== */

    --de-text-color:       var(--de-indigo);
    --de-text-muted:       var(--de-indigo-60);
    --de-text-inverse:     var(--de-white);
    --de-background-color: var(--de-off-white);
    --de-surface-color:    var(--de-white);
    --de-primary-color:    var(--de-violet);
    --de-secondary-color:  var(--de-indigo);
    --de-cta-color:        var(--de-coral);
    --de-lotus-color:      var(--de-coral);


    /* ======================================================================
       BRAND BACKDROP
       Painted once by base.css, fixed to the viewport, behind every page.
       ====================================================================== */

    --de-gradient-hero: radial-gradient(110% 80% at 50% 22%,
                        var(--de-peach) 0%,
                        var(--de-peach-60) 32%,
                        var(--de-lavender-60) 68%,
                        var(--de-off-white) 100%);


    /* ======================================================================
       GLASS

       Two families. The chrome glass is the near-white frosting used by the
       header pill and the bottom bar. The section glass is the tinted kind
       used by full-width bands, so the backdrop above stays visible through
       every coloured area of the page.

       0.78 is a floor, not a taste: a violet band at that alpha resolves to
       roughly #755FD1 over the peach zone of the gradient, which gives white
       text about 4.9:1 - just past WCAG AA for body copy. Thinner than that
       and a tinted band may only carry large text.
       ====================================================================== */

    /* --- Chrome (header pill, bottom bar, off-canvas) --- */
    --de-glass-bg:     rgba(255, 255, 255, 0.72);
    --de-glass-border: rgba(255, 255, 255, 0.65);
    --de-glass-blur:   14px;

    /* --- Sections --- */
    --de-glass-primary:   rgba( 79,  70, 229, 0.78);  /* violet */
    --de-glass-secondary: rgba( 42,  46, 109, 0.78);  /* indigo */
    --de-glass-light:     rgba(255, 255, 255, 0.55);
    --de-glass-dark:      rgba(  0,   0,   0, 0.62);
    --de-glass-blur-section: 18px;

    /* Solid equivalents. Used as the fallback wherever backdrop-filter is
       unsupported or the visitor has asked for reduced transparency, so a
       band never turns into unreadable text on a busy gradient. */
    --de-solid-primary:   var(--de-violet);
    --de-solid-secondary: var(--de-indigo);
    --de-solid-light:     var(--de-off-white);
    --de-solid-dark:      var(--de-black);


    /* ======================================================================
       SHADOWS AND BORDERS - derived from the indigo
       ====================================================================== */

    --de-shadow-soft:   0 10px 25px rgba(42, 46, 109, 0.08);
    --de-shadow-deep:   0 25px 50px rgba(42, 46, 109, 0.12);
    --de-border-subtle: rgba(42, 46, 109, 0.15);


    /* ======================================================================
       APP SHELL METRICS
       Defined here rather than in app-shell.css because sections outside the
       shell still need to reason about the same rhythm.
       ====================================================================== */

    --de-header-h:   64px;   /* height of the header pill */
    --de-header-top: 12px;   /* gap from the top edge */
    --de-footer-h:   90px;   /* height of the bottom bar */
    --de-scroll-pad-top:    calc(var(--de-header-h) + var(--de-header-top) + 16px);
    --de-scroll-pad-bottom: calc(var(--de-footer-h) + 20px);


    /* ======================================================================
       TYPOGRAPHY
       ====================================================================== */

    --de-primary-font: "Montserrat", sans-serif;
    --de-measure:      700px;   /* maximum reading width */


    /* ======================================================================
       COMPATIBILITY LAYER

       The Spanish names every current rule still reads. Remapping them here
       is what recolours the whole site - funnel included - without touching
       another stylesheet. Removed when the section system replaces the
       colour-named classes.
       ====================================================================== */

    --fuente-principal: var(--de-primary-font);

    --color-texto:      var(--de-text-color);
    --color-fondo:      var(--de-background-color);
    --color-primario:   var(--de-primary-color);
    --color-acento:     var(--de-cta-color);

    /* Nothing in the theme references this one. Kept because Fluent Forms
       stores custom CSS in the database, where it cannot be grepped. */
    --color-secundario: var(--de-secondary-color);
}