/**
 * Design Tokens — single source of truth for the Ora Nissim design system.
 *
 * See DESIGN_SYSTEM.md for full documentation: what each token means, when to
 * use it, and why the scale was chosen.
 *
 * Conventions:
 *   1. SEMANTIC tokens (e.g. --color-text) reference RAW tokens (e.g. --raw-coffee-900).
 *      Components should use semantic tokens only. Raw tokens are escape hatches.
 *   2. T-shirt sizing across all scales: 3xs / 2xs / xs / sm / md / lg / xl / 2xl / 3xl / 4xl / 5xl.
 *   3. Spacing uses rem for accessibility (respects user font-size).
 *   4. Type scale is SEPARATE from spacing (legacy site conflated them).
 *   5. All tokens live in :root. No theme override layer yet (single-theme site).
 */

:root {

  /* ============================================================
     1. COLOR — Raw palette (do not use in components; reference via semantic tokens)
     ============================================================ */

  /* Brand: mustard — primary brand color, warm gold */
  --raw-mustard-50:  #FFFCF5;
  --raw-mustard-100: #FFF1C7;  /* "stained-white" — gradient highlight */
  --raw-mustard-200: #EFD8A4;  /* "mustard-muted" */
  --raw-mustard-300: #F0D8B2;  /* "mustard-light" */
  --raw-mustard-500: #CDB367;  /* "mustard" — the brand color */
  --raw-mustard-700: #A8924E;  /* darker mustard for hover/active */
  --raw-mustard-900: #5C4F2A;  /* deep mustard, rarely used */

  /* Neutrals: warm-tinted (matches the warm whites used in the legacy palette) */
  --raw-white:       #FFFFFF;
  --raw-off-white:   #FFF9EC;  /* slight warmth */
  --raw-warm-white:  #FBF6E9;  /* surface backgrounds — SECONDARY section bg (white = primary) */
  --raw-soft-gray:   #F4F2EF;  /* card / muted backgrounds */
  --raw-gray-200:    #E7E3DC;
  --raw-gray-300:    #C6C6C6;  /* "muted-light" */
  --raw-gray-500:    #697080;  /* "muted" — darkened 2026-08-10 so muted text clears AA (4.60:1) on the new #FBF6E9 background */

  /* Coffee scale — for text and dark surfaces */
  --raw-coffee-700:  #3A2A18;
  --raw-coffee-800:  #241A0F;  /* "dark-coffee" — primary text */
  --raw-coffee-900:  #1E1600;  /* "dark-brown" — deepest text */
  --raw-black:       #000000;

  /* State (functional) — limited palette, brand-tinted where possible */
  --raw-success:     #2E7D32;
  --raw-warning:     #C58A2C;
  --raw-error:       #B3261E;
  --raw-info:        #4A6FA5;

  /* ============================================================
     1b. COLOR — Semantic tokens (USE THESE in components)
     ============================================================ */

  /* Brand */
  --color-brand:           var(--raw-mustard-500);
  --color-brand-soft:      var(--raw-mustard-200);
  --color-brand-soft-alt:  var(--raw-mustard-300);
  --color-brand-highlight: var(--raw-mustard-100);
  --color-brand-strong:    var(--raw-mustard-700);

  /* Surface (backgrounds) */
  --color-surface:         var(--raw-white);          /* default page bg */
  --color-surface-warm:    var(--raw-warm-white);     /* hero / soft sections */
  --color-surface-soft:    var(--raw-soft-gray);      /* cards / muted sections */
  --color-surface-alt:     var(--raw-off-white);      /* gallery frame, product imagery containers */
  --color-surface-inverse: var(--raw-coffee-800);     /* dark sections / footer */

  /* Text */
  --color-text:            var(--raw-coffee-800);     /* body + headings (per brand) */
  --color-text-muted:      var(--raw-gray-500);       /* captions, meta */
  --color-text-subtle:     var(--raw-gray-300);       /* disabled, placeholder */
  --color-text-inverse:    var(--raw-white);          /* on dark surfaces */
  --color-text-brand:      var(--raw-mustard-700);    /* links / brand emphasis (accessible) */

  /* Border */
  --color-border:          var(--raw-gray-200);
  --color-border-muted:    var(--raw-soft-gray);
  --color-border-strong:   var(--raw-coffee-800);
  --color-border-brand:    var(--raw-mustard-500);

  /* State */
  --color-success:         var(--raw-success);
  --color-warning:         var(--raw-warning);
  --color-error:           var(--raw-error);
  --color-info:            var(--raw-info);

  /* ============================================================
     2. SPACING — 4px-grounded modular scale, WRITTEN FOR 10px ROOT
     ============================================================
     Bricks defaults html { font-size: 62.5% } → 1rem = 10px.
     All rem values below are calibrated so they hit the intended px target
     on Bricks' 10px root.  If you ever change the root, rescale here.
     Used for: margin, padding, gap, position offsets, fixed sizes.
     NOT used for: font-size (use --text-* instead — they're separate scales). */

  --space-3xs: 0.4rem;    /*   4px */
  --space-2xs: 0.8rem;    /*   8px */
  --space-xs:  1.2rem;    /*  12px */
  --space-sm:  1.6rem;    /*  16px */
  --space-md:  2.4rem;    /*  24px — typical content gap */
  --space-lg:  3.2rem;    /*  32px */
  --space-xl:  4.8rem;    /*  48px — section internal padding */
  --space-2xl: 6.4rem;    /*  64px — section-to-section */
  --space-3xl: 9.6rem;    /*  96px — major section breaks */
  --space-4xl: 12.8rem;   /* 128px */
  --space-5xl: 16rem;     /* 160px — hero vertical rhythm */

  /* ============================================================
     3. TYPE — font sizes (calibrated for 10px root)
     ============================================================ */

  --text-xs:   1.2rem;    /*  12px — meta, footnote */
  --text-sm:   1.4rem;    /*  14px — small print */
  --text-base: 1.6rem;    /*  16px — body */
  --text-lg:   1.8rem;    /*  18px — emphasized body */
  --text-xl:   2.4rem;    /*  24px — small heading / H5 */
  --text-2xl:  3.2rem;    /*  32px — H4 */
  --text-3xl:  4rem;      /*  40px — H3 */
  --text-4xl:  5.6rem;    /*  56px — H2 */
  --text-5xl:  8rem;      /*  80px — H1 / hero */

  /* Line height */
  --leading-tight:   0.9;   /* art-headline tight (brand signature) */
  --leading-snug:    1.1;
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.7;   /* long-form prose */

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;  /* small caps, badges */

  /* Font families — assigned in fonts.css */
  --font-display: 'Shavis FM', 'Noto Sans Hebrew', system-ui, sans-serif;
  --font-body:    'Noto Sans Hebrew', system-ui, sans-serif;
  --font-script:  'Vujahday Script', cursive;
  --font-accent:  'DiscoveryFs', var(--font-body);

  /* Font weight */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ============================================================
     4. RADIUS
     ============================================================ */

  --radius-none: 0;
  --radius-xs:   0.2rem;     /*  2px */
  --radius-sm:   0.4rem;     /*  4px */
  --radius-md:   0.8rem;     /*  8px — buttons, inputs */
  --radius-lg:   1.6rem;     /* 16px — cards */
  --radius-xl:   2.4rem;     /* 24px — pills, large cards */
  --radius-2xl:  3.2rem;     /* 32px — hero shapes */
  --radius-full: 9999px;     /* circles, pills */

  /* ============================================================
     5. SHADOW — minimal, coffee-tinted (not pure black)
     ============================================================ */

  --shadow-xs:  0 1px 2px  rgba(36, 26, 15, 0.04);
  --shadow-sm:  0 2px 6px  rgba(36, 26, 15, 0.06);
  --shadow-md:  0 4px 12px rgba(36, 26, 15, 0.08);
  --shadow-lg:  0 12px 32px rgba(36, 26, 15, 0.10);
  --shadow-xl:  0 24px 64px rgba(36, 26, 15, 0.12);

  /* Special: brand glow for highlights / hover */
  --shadow-brand-glow: 0 0 24px rgba(205, 179, 103, 0.35);

  /* Inset */
  --shadow-inset: inset 0 1px 2px rgba(36, 26, 15, 0.06);

  /* ============================================================
     6. MOTION
     ============================================================ */

  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --ease-linear:    linear;
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:     cubic-bezier(0, 0, 0.2, 1);    /* deceleration */
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1);    /* acceleration */
  --ease-emphasis:  cubic-bezier(0.3, 0, 0, 1);    /* expressive */

  /* ============================================================
     7. BREAKPOINTS — for documentation; @media queries don't accept custom properties
     ============================================================ */

  --bp-sm:  40em;     /*  640px — large phone */
  --bp-md:  48em;     /*  768px — tablet portrait */
  --bp-lg:  64em;     /* 1024px — tablet landscape / small laptop */
  --bp-xl:  80em;     /* 1280px — desktop */
  --bp-2xl: 96em;     /* 1536px — large desktop */

  /* ============================================================
     8. LAYOUT — page width, gutters
     ============================================================ */

  --layout-max-width:    1280px;   /* main content max */
  --layout-wide-width:   1440px;   /* hero / gallery sections */
  --layout-narrow-width: 720px;    /* prose / long-form */
  --layout-gutter:       var(--space-md);   /* responsive horizontal padding */

  /* ============================================================
     9. Z-INDEX — semantic stack
     ============================================================ */

  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* ============================================================
     10. BRAND SIGNATURES — recurring visual patterns expressed as tokens
     ============================================================ */

  /* The golden gradient line — used in border-golden, social-icon, testimonial card
     in the legacy site. Now a token so it can change in one place. */
  --gradient-golden-line: linear-gradient(
    270deg,
    var(--color-brand) 0%,
    var(--color-brand-highlight) 50%,
    var(--color-brand) 100%
  );

  /* Golden fill — used for primary CTA buttons */
  --gradient-golden-fill: linear-gradient(
    90deg,
    var(--color-brand) 10%,
    var(--color-brand-highlight) 50%,
    var(--color-brand) 90%
  );

  /* Subtle warm overlay for hero backgrounds */
  --gradient-warm-overlay: linear-gradient(
    180deg,
    rgba(251, 246, 233, 0) 0%,
    rgba(251, 246, 233, 0.85) 70%,
    var(--color-surface-warm) 100%
  );
}

/* ============================================================
   ENGLISH SITE — Latin display face.
   Polylang marks EN pages with lang="en-US" on <html>. Titles keep the
   same token, so everything styled with var(--font-display) switches
   automatically.

   Vujahday Script is Latin-only (no Hebrew glyphs), so Shavis FM and
   Noto Sans Hebrew MUST stay in the stack: any Hebrew character that
   appears on an English page (artwork titles, addresses, stray strings)
   falls through to a face that actually covers it instead of tofu.
   ============================================================ */

html[lang^="en"] {
  /* 2026-08-20: was 'Vujahday Script', …, which made the script face the
     default for EVERY EN heading. The designer's sketches show the opposite
     system — headings read in the body face, and Vujahday marks a single
     accent word via `.c-en-script` (heading map, ora-i18n.php §12). */
  --font-display: var(--font-body);
}

/* ============================================================
   Reduced motion — flatten all durations
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}

/* ============================================================
   MOBILE OVERRIDES — one place that rescales the whole site.
   Bricks breakpoints: 991 (tablet_portrait) / 767 (mobile_landscape)
   / 478 (mobile_portrait).
   ============================================================ */

@media (max-width: 991px) {
  :root {
    --text-5xl:  6rem;      /* 60px hero */
    --text-4xl:  4.8rem;    /* 48px H2  */
    --space-3xl: 7.2rem;
    --space-4xl: 9.6rem;
    --space-5xl: 11.2rem;
  }
}

@media (max-width: 767px) {
  :root {
    --text-5xl:  4.4rem;    /* 44px hero */
    --text-4xl:  3.6rem;    /* 36px H2   */
    --text-3xl:  3rem;      /* 30px H3   */
    --text-2xl:  2.6rem;
    --space-2xl: 4.8rem;
    --space-3xl: 5.6rem;
    --space-4xl: 7.2rem;
    --space-5xl: 8rem;
    --layout-gutter: var(--space-sm);   /* 16px side gutters */
  }
}