/*
 * Design tokens — derived from the Figma file's CSS variables.
 * Figma names like `--brand-colors/dark-slate` are flattened to
 * `--brand-dark-slate` since CSS custom properties can't contain `/`.
 *
 * Exposed at :root so var(--brand-dark-slate) is usable site-wide,
 * not just inside .redesign — that matters because the legacy
 * /css/style.css also references these colors.
 *
 * Brand swap (May 2026): the original sea-green primary palette was
 * retired in favor of dark slate. The legacy `--brand-sea-green*`
 * names are kept as aliases so older selectors keep working while we
 * migrate references over. New work should use `--brand-dark-slate*`.
 */

:root, .redesign {
    /* Brand palette — dark slate (primary) */
    --brand-dark-slate:         #28414b;
    --brand-dark-slate-darker:  #20343c;
    --brand-dark-slate-lighter: #53696f;
    --brand-offwhite-slate:     #c2d2d8;  /* Referrals card button */
    --brand-border-slate:       #85a5b0;  /* Referrals card border (Figma slate, May '26) */
    --brand-slate:              #85a5b0;  /* My Mikvah Calendar section bg */

    /* Warm palette */
    --brand-offwhite-peach: #fef5f2;
    --brand-peach:          #fee0d6;   /* saturated peach — CTA buttons */
    --brand-peach-darker:   #e5cac1;   /* hover/active peach (Figma May '26) */
    --brand-border-peach:   #e5cac1;   /* TH Instructors card border — peach-darker per Figma */
    --brand-beige:          #f2e7dc;
    --brand-beige-darker:   #d0b09c;   /* alias of legacy --brand-chestnut */
    --brand-brown:          #554b4b;
    --brand-chestnut:       #d0b09c;   /* play button fill + helpline border */
    --brand-blue-accent:    #86bae4;

    /* Legacy aliases — old sea-green vars now point at dark slate. Kept
     * so existing selectors don't need touching during the migration. */
    --brand-sea-green:          var(--brand-dark-slate);
    --brand-sea-green-darker:   var(--brand-dark-slate-darker);
    --brand-sea-green-darkest:  var(--brand-dark-slate-darker);
    --brand-offwhite-seagreen:  var(--brand-offwhite-slate);

    /* Hero sticky-pill fills — exact Figma values (24% opacity per #39) */
    --hero-pill-helpline:  rgba(134, 186, 228, 0.5);    /* blue-tinted glass */
    --hero-pill-ghost:     rgba(194, 210, 216, 0.24);   /* offwhite-slate transparent */
    --hero-pill-search:    rgba(194, 210, 216, 0.24);   /* offwhite-slate deeper transparent */

    /* RGB channel helpers — for rgba() calls that need alpha:
       rgba(var(--brand-dark-slate-rgb), 0.15) */
    --brand-dark-slate-rgb:         40, 65, 75;
    --brand-dark-slate-darker-rgb:  32, 52, 60;
    --brand-dark-slate-lighter-rgb: 83, 103, 111;
    --brand-sea-green-rgb:          40, 65, 75;
    --brand-sea-green-darker-rgb:   32, 52, 60;
    --brand-sea-green-darkest-rgb:  32, 52, 60;

    /* Text */
    --text-heading:        #554b4b;
    --text-paragraph:      #776f6f;
    --text-heading-white:  #ffffff;
    --text-paragraph-white:#eeeeee;

    /* Neutrals */
    --neutral-white:       #ffffff;
    --border-primary:      rgba(0, 0, 0, 0.1);

    /* Opacity helpers (mirror Figma tokens used on glassmorphic UI) */
    --opacity-white-5:  rgba(255, 255, 255, 0.05);
    --opacity-white-10: rgba(255, 255, 255, 0.10);
    --opacity-white-15: rgba(255, 255, 255, 0.15);
    --opacity-white-24: rgba(255, 255, 255, 0.24);
    --opacity-white-32: rgba(255, 255, 255, 0.32);
    --opacity-black-60: rgba(0, 0, 0, 0.60);

    /* Type families.
     * --font-display is the serif display stack; swap Cormorant for
     * licensed IvyJournal here (and only here) when ready. */
    --font-display: 'Cormorant Garamond', 'IvyJournal', 'EB Garamond', Georgia, serif;
    --font-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-hand:    'Handlee', 'Segoe Script', cursive;

    /* Type scale — desktop values from Figma.
     * Paired line-heights in -lh vars. */
    --fs-h1:    56px;  --lh-h1: 1.2;
    --fs-h2:    48px;  --lh-h2: 1.2;
    --fs-h3:    40px;  --lh-h3: 1.2;
    --fs-h4:    32px;  --lh-h4: 1.3;
    --fs-h5:    24px;  --lh-h5: 1.4;
    --fs-h6:    20px;  --lh-h6: 1.4;

    --fs-body:    16px; --lh-body:    1.5;
    --fs-medium:  18px; --lh-medium:  1.5;
    --fs-small:   14px; --lh-small:   1.5;
    --fs-tiny:    12px; --lh-tiny:    1.5;

    /* Tagline: all-caps label above section headings */
    --fs-tagline:        12px;
    --lh-tagline:        1.5;
    --ls-tagline:        2px;

    /* Spacing scale — Figma uses 4/8/12/16/20/24/32/48/64/80/112 */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-28: 112px;

    /* Containers */
    --container-max: 1312px;
    --container-pad-inline: 64px;

    /* Radii — pill buttons and glassmorphic pills */
    --radius-pill:   100px;
    --radius-full:   1000px;
    --radius-tag:    0;        /* tags are square per Figma */
    --radius-card:   0;
    --radius-input:  100px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);

    /* Motion — hover/focus color & background fades.
     * The redesign grew up on an ad-hoc 120–140ms, which reads as instant
     * on small surfaces like the mega-menu rail. Bumped to 240ms so a
     * color / bg / border change eases in *and* out with a perceptible
     * (but still quick) fade. Single source of truth for the global hover
     * net in base.css and every color/bg hover transition across the
     * components — retune here. Motion (transform, reveals, drawers) keeps
     * its own bespoke timing and is intentionally NOT routed through this. */
    --hover-dur:  200ms;
    --hover-ease: ease;
}

/* Mobile overrides — scale headings down below tablet */
@media (max-width: 768px) {
    .redesign {
        --fs-h1: 40px;
        --fs-h2: 32px;
        --fs-h3: 28px;
        --fs-h4: 24px;
        --fs-h5: 20px;
        --fs-h6: 18px;
        --container-pad-inline: 20px;
    }
}