/* חגיגת בשרים — design tokens.
 *
 * Single CSS source of truth (mirrors design-tokens/colors.json). No hardcoded
 * hex anywhere else in the theme — components reference these custom properties.
 *
 * Surface model: the theme is ONE theme that mixes light and dark surfaces by
 * SECTION (not a user toggle). :root defaults to the light surface; any element
 * with .hb-section--dark flips the --surface-* group to dark, .hb-section--light
 * flips it back (for nesting). Components read --surface-bg / --surface-text /
 * --surface-accent etc. so they recolor automatically by the section they're in.
 */

:root {
    /* ---- Brand palette (sampled from the new logo) ---- */
    --hb-charcoal:    #231F20;
    --hb-gold-light:  #F2C485;
    --hb-gold:        #D7A465;
    --hb-gold-deep:   #996633;
    --hb-cream:       #F7F1E7;
    --hb-white:       #FFFFFF;

    /* Warm neutral steps (from the charcoal scale) */
    --hb-ink-700:     #181616;
    --hb-ink-600:     #1E1B1C;
    --hb-grey-500:    #5A524C;
    --hb-grey-300:    #C9BCA8;
    --hb-border-warm: #E4D8C4;

    /* ---- Surface set: LIGHT (default on :root) ---- */
    --surface-bg:        var(--hb-cream);
    --surface-bg-alt:    var(--hb-white);
    --surface-text:      var(--hb-charcoal);
    --surface-text-muted:var(--hb-grey-500);
    --surface-accent:    var(--hb-gold-deep);
    --surface-accent-2:  var(--hb-gold);
    --surface-border:    var(--hb-border-warm);
    --surface-logo:      light; /* informational */

    /* ---- Typography ---- */
    --font-display: 'FbGazoz', 'Arial Hebrew', 'David Libre', system-ui, sans-serif;
    --font-body:    'FbParmesan', 'Arial Hebrew', 'David Libre', system-ui, sans-serif;
    --font-script:  'Tropical Summer Signature', 'Brush Script MT', cursive;
    --font-num:     'FbParmesan', system-ui, monospace;

    /* Type scale (desktop) — display-led, Hebrew */
    --fs-display: 64px;
    --fs-h1:      48px;
    --fs-h2:      36px;
    --fs-h3:      26px;
    --fs-h4:      20px;
    --fs-body:    17px;
    --fs-small:   14.5px;
    --fs-eyebrow: 13px;
    --fs-script:  34px;  /* Tropical EN subtitle */

    --lh-tight:   1.12;
    --lh-heading: 1.25;
    --lh-body:    1.65;  /* Hebrew reads better with open leading */

    --fw-light:  300;
    --fw-body:   400;
    --fw-medium: 500;
    --fw-bold:   700;

    /* ---- Spacing scale ---- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;
    --sp-9:  96px;
    --sp-section: clamp(48px, 8vw, 112px); /* vertical section rhythm */

    /* ---- Layout ---- */
    --container-max: 1280px;
    --container-narrow: 860px;
    --gutter: clamp(16px, 4vw, 40px);
    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* ---- Header ---- */
    --header-height:        80px;
    --header-height-mobile: 64px;
    --header-scroll-trigger: 60px;

    /* ---- Shadow ---- */
    --shadow-sm: 0 1px 3px rgba(35,31,32,.10);
    --shadow:    0 8px 28px rgba(35,31,32,.14);
    --shadow-lg: 0 20px 60px rgba(35,31,32,.22);

    /* ---- Motion ---- */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 180ms;
    --dur:      300ms;
    --dur-slow: 560ms;

    /* ---- z-index ---- */
    --z-header:   1000;
    --z-drawer:   1100;
    --z-overlay:  1150;
    --z-modal:    1200;
    --z-floating: 1300;
    --z-nagish:   1400; /* accessibility trigger must beat everything */
}

/* ---- Surface set: DARK ---- */
.hb-section--dark {
    --surface-bg:        var(--hb-charcoal);
    --surface-bg-alt:    var(--hb-ink-600);
    --surface-text:      var(--hb-cream);
    --surface-text-muted:var(--hb-grey-300);
    --surface-accent:    var(--hb-gold-light);
    --surface-accent-2:  var(--hb-gold);
    --surface-border:    #3A3434;
    --surface-logo:      dark;
}

/* ---- Surface set: LIGHT (explicit — for re-flipping inside a dark parent) ---- */
.hb-section--light {
    --surface-bg:        var(--hb-cream);
    --surface-bg-alt:    var(--hb-white);
    --surface-text:      var(--hb-charcoal);
    --surface-text-muted:var(--hb-grey-500);
    --surface-accent:    var(--hb-gold-deep);
    --surface-accent-2:  var(--hb-gold);
    --surface-border:    var(--hb-border-warm);
    --surface-logo:      light;
}

/* Any section paints itself from its surface group */
.hb-section {
    background: var(--surface-bg);
    color: var(--surface-text);
    padding-block: var(--sp-section);
}

/* Mobile type scale */
@media (max-width: 768px) {
    :root {
        --fs-display: 40px;
        --fs-h1:      34px;
        --fs-h2:      27px;
        --fs-h3:      22px;
        --fs-h4:      18px;
        --fs-body:    16px;
        --fs-script:  28px;
    }
}