/* Design tokens — alonagrytsko.com
   Warm, calming therapy palette: cream surface, teal primary, gold accent.
   Neutrals are hue-tinted (never pure #000/#fff). */

:root {
    /* ---- Brand palette (HSL channels, used via hsl(var(--x))) ---- */
    --cream:        40 33% 96%;
    --cream-dark:   40 30% 92%;
    --card:         40 44% 98%;
    --warm-brown:   28 18% 22%;

    --teal:         168 26% 40%;
    --teal-dark:    168 28% 30%;
    --teal-light:   168 30% 86%;

    --gold:         37 56% 53%;
    --gold-dark:    37 58% 44%;
    --gold-light:   38 52% 74%;

    /* ---- Semantic roles ---- */
    --bg:            var(--cream);
    --bg-alt:        var(--cream-dark);
    --surface:       var(--card);
    --text:          var(--warm-brown);
    --text-soft:     28 12% 38%;
    --text-faint:    28 10% 52%;
    --primary:       var(--teal);
    --primary-deep:  var(--teal-dark);
    --accent:        var(--gold);
    --accent-deep:   var(--gold-dark);
    --border:        38 24% 86%;
    --border-strong: 38 22% 78%;
    --ring:          var(--gold);

    /* ---- Tinted shadows (carry the warm/teal hue, never flat black) ---- */
    --shadow-soft:  0 2px 10px -4px hsl(168 20% 28% / .10), 0 8px 24px -10px hsl(168 20% 28% / .10);
    --shadow-card:  0 4px 16px -6px hsl(168 22% 26% / .12), 0 18px 40px -22px hsl(168 22% 26% / .16);
    --shadow-lift:  0 10px 30px -10px hsl(168 24% 24% / .18), 0 30px 60px -30px hsl(168 24% 24% / .22);
    --shadow-gold:  0 8px 26px -8px hsl(37 60% 40% / .30);

    /* ---- Radii ---- */
    --r-sm: .375rem;
    --r-md: .75rem;
    --r-lg: 1.25rem;
    --r-xl: 1.75rem;
    --r-pill: 999px;

    /* ---- Fluid type scale (1.25 ratio, clamps for responsiveness) ---- */
    --step--1: clamp(.83rem, .80rem + .15vw, .92rem);
    --step-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
    --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.45rem);
    --step-2:  clamp(1.5rem, 1.35rem + .75vw, 2rem);
    --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.85rem);
    --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 4rem);
    --step-5:  clamp(3rem, 2.2rem + 4vw, 5.5rem);

    /* ---- Spacing rhythm ---- */
    --space-section: clamp(4rem, 3rem + 6vw, 9rem);
    --container:     76rem;
    --container-narrow: 52rem;
    --measure:       66ch;
    --header-h:      4.5rem;

    /* ---- Motion ---- */
    --ease-out:   cubic-bezier(.22, 1, .36, 1);   /* ease-out-quint */
    --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
    --dur-fast:   .18s;
    --dur:        .32s;
    --dur-slow:   .6s;

    /* ---- z-index scale ---- */
    --z-header: 100;
    --z-menu:   110;
    --z-widget: 120;
    --z-grain:  9;

    /* ---- accessibility ---- */
    --a11y-font-scale: 1;
}

/* High-contrast a11y mode: deepen text, strengthen borders. */
.a11y-contrast {
    --text:        28 30% 12%;
    --text-soft:   28 26% 22%;
    --text-faint:  28 22% 30%;
    --primary:     168 40% 26%;
    --accent:      37 70% 34%;
    --border:      38 26% 70%;
    --border-strong: 38 28% 60%;
}