/*
 * tokens.css - brand variables from the Chant Now Guidelines V02 2026.
 * Loaded first everywhere. Nothing else resolves without it.
 */

:root {
    /* --- Primary palette --- */
    --cn-indigo:        #2A2E6D;  /* Sacred Indigo */
    --cn-lavender:      #7C8BFF;  /* Lavender Mist */
    --cn-peach:         #FFB98A;  /* Golden Peach  */

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

    /* --- Neutrals --- */
    --cn-off-white:     #F1F1F1;  /* Off White      */
    --cn-black:         #000000;  /* Midnight Black */
    --cn-white:         #FFFFFF;

    /* --- Tint ramp in 20% steps (the manual's system) --- */
    --cn-indigo-20:     #D4D5E2;
    --cn-indigo-40:     #A9ABC5;
    --cn-indigo-60:     #7F82A7;
    --cn-indigo-80:     #54588A;
    --cn-lavender-20:   #E5E8FF;
    --cn-lavender-40:   #CBD1FF;
    --cn-lavender-60:   #B0B9FF;
    --cn-lavender-80:   #96A2FF;
    --cn-peach-20:      #FFF1E8;
    --cn-peach-40:      #FFE3D0;
    --cn-peach-60:      #FFD4B9;
    --cn-peach-80:      #FFC6A1;

    /* --- Semantic roles (what components actually reference) --- */
    --cn-text-color:       var(--cn-indigo);
    --cn-text-muted:       var(--cn-indigo-60);
    --cn-background-color: var(--cn-off-white);
    --cn-surface-color:    var(--cn-white);
    --cn-primary-color:    var(--cn-violet);
    --cn-secondary-color:  var(--cn-indigo);
    --cn-cta-color:        var(--cn-coral);
    --cn-lotus-color:      var(--cn-coral);

    /* --- Frosted glass (header pill and bottom bar share these values) --- */
    --cn-glass-bg:     rgba(255, 255, 255, 0.72);
    --cn-glass-border: rgba(255, 255, 255, 0.65);
    --cn-glass-blur:   14px;

    /* --- Shadows and borders derived from the indigo --- */
    --cn-shadow-soft:  0 10px 25px rgba(42, 46, 109, 0.08);
    --cn-shadow-deep:  0 25px 50px rgba(42, 46, 109, 0.12);
    --cn-border-subtle: rgba(42, 46, 109, 0.15);

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

    /* --- Compatibility aliases (still referenced by older templates) --- */
    --cn-accent-color: var(--cn-text-muted);

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

    /* --- Typography --- */
    --cn-primary-font: "Montserrat", sans-serif;
    --cn-measure: 700px;   /* max reading width from the manual */
}