/* ============================================================
   base.css — design tokens + page-level reset
   Tokens lifted from the Figma library (4035:4962).
   ============================================================ */

:root {
    /* Brand colors (from Figma "color/surface/action-primary 1..4") */
    --c-magenta:   #be007c;   /* primary 1 */
    --c-gold:      #c5984e;   /* primary 2 */
    --c-olive:     #b2bd5a;   /* primary 3 */
    --c-purple:    #5243c2;   /* primary 4 */

    --c-olive-deep: #7a8132;  /* derived — for headings on light bg */
    --c-magenta-deep: #92005d;/* derived — hover */

    /* Neutrals (from Figma "color/neutral/*") */
    --c-ink:       #1d1e1b;   /* neutral 900 */
    --c-ink-soft:  #282825;   /* action-secondary-text */
    --c-line:      #e6e6e5;   /* neutral 200 */
    --c-mist:      #f4f5f4;   /* neutral 100 */
    --c-fog:       #f9faf9;   /* neutral 50 */
    --c-white:     #ffffff;

    /* Card surface — gold at low alpha, matching Figma cards */
    --c-card:        #f5ecd9;
    --c-card-hover:  #ead7b0;

    /* Type ramp (Figma typography tokens) */
    --t-h2: 54px;     --t-h2-lh: 50px;
    --t-h3: 43px;     --t-h3-lh: 43px;
    --t-h4: 36px;     --t-h4-lh: 36px;
    --t-h5: 28px;     --t-h5-lh: 32px;
    --t-h6: 22px;     --t-h6-lh: 26px;
    --t-pXL: 22px;    --t-pXL-lh: 32px;
    --t-pL: 18px;     --t-pL-lh: 28px;
    --t-pM: 14px;     --t-pM-lh: 22px;
    --t-pS: 10px;     --t-pS-lh: 18px;

    /* Layout */
    --container: 1240px;
    --gutter:    28px;
    --radius:    14px;
    --radius-sm: 8px;
    --radius-pill: 999px;

    /* Spacing tokens — extracted from Figma Auto Layout (see design-tokens.json) */
    --sp-section:    96px;   /* gap between sub-sections inside a day */
    --sp-section-py: 64px;   /* top/bottom padding on each "events" container */
    --sp-block:      24px;   /* gap between blocks in an event/box info */
    --sp-stack:      16px;   /* tight stack gap */
    --sp-title:      12px;   /* icon-to-title gap */
    --sp-icons:      10px;   /* between icons */
    --sp-tight:      8px;
    --sp-card-x:     32px;   /* horizontal gap in card grids */
    --sp-card-y:     24px;   /* vertical gap in card grids */

    /* Google Sans is the Figma source-of-truth font. It is not on the public
       Google Fonts CDN, so the stack tries Google Sans first (in case it is
       installed locally / served by a private CDN), then falls back through
       Hebrew-friendly faces. */
    --font-display: "Google Sans", "Google Sans Text", "Product Sans", "Heebo", "Assistant", "Rubik", system-ui, -apple-system, sans-serif;
    --font-body:    "Google Sans", "Google Sans Text", "Product Sans", "Heebo", "Assistant", "Rubik", system-ui, -apple-system, sans-serif;
}

html, body { direction: rtl; }
body.darom-front {
    background: var(--c-white);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: var(--t-pL);
    line-height: var(--t-pL-lh);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide Hello Elementor's built-in chrome on the festival home only */
body.darom-front .site-header,
body.darom-front .site-footer { display: none; }
body.darom-front main { padding: 0; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Page-level wrapper around every section — gray surface that shows around
   sections constrained by .container (e.g. the schedule's tabs+panels card). */
.darom-page {
    background: var(--c-mist);   /* #f4f5f4 */
}

/* Screen-reader-only utility */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Mobile gutter compression */
@media (max-width: 760px) {
    :root { --gutter: 18px; }
}