/* =========================================================
   RAMA · Design tokens
   ---------------------------------------------------------
   The ONLY file that defines the visual language.
   Source: brand-kit.md (Drive: סוכנות/ראמה). Values sampled from
   the brand guidelines. To change the language, change this file;
   pages use the variables only.

   Rules from the brand kit, applied across the site:
   - dark charcoal ground, cream text, tan for logo / accents / thin frames
   - dark green = secondary surface
   - red = spot CTA only, never a full background
   - thin tan line frames, lots of air, one big headline
   - two typefaces at most per view; no gradients
   ========================================================= */

/* Brand fonts (woff2 in /assets/fonts).
   NOTE: a desktop font license is not a webfont license. Confirm web
   licensing for Mostra Nuova AltD and Vintage Glamour before going live.
   RAG Sans: woff2 files still to be added; until then Rubik is the Hebrew stand-in. */
@font-face { font-family: "Mostra Nuova AltD"; src: url("../fonts/MostraNuovaAltD-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Vintage Glamour"; src: url("../fonts/VintageGlamour-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* ENABLE when RAG Sans woff2 files exist in /assets/fonts/:
@font-face { font-family: "RAG Sans"; src: url("../fonts/RAGSans-1.4-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "RAG Sans"; src: url("../fonts/RAGSans-1.4-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
*/

:root {
  /* ---- palette (raw, from brand-kit.md) ---- */
  --c-charcoal:   #1C1C1A;
  --c-cream:      #F5EEDE;
  --c-cream-2:    #F8F0E5;
  --c-tan:        #E3BA8C;
  --c-tan-light:  #E9C89D;
  --c-green:      #273C33;
  --c-green-gray: #435352;
  --c-red:        #C31A41;
  --c-frame:      #D6B2A4;

  /* ---- roles (pages use these) ---- */
  --bg:           var(--c-charcoal);
  --bg-raised:    #252522;
  --bg-inverse:   var(--c-green);
  --text:         var(--c-cream);
  --text-muted:   #B7AE9B;
  --text-inverse: var(--c-cream);
  --brand:        var(--c-tan);          /* accents, frames, logo */
  --accent:       var(--c-red);          /* spot CTA only */
  --accent-soft:  var(--c-tan);
  --line:         color-mix(in srgb, var(--c-tan) 38%, transparent);   /* thin tan frame */
  --line-strong:  var(--c-tan);
  --focus:        var(--c-tan-light);
  --ok:           #8DBFA0;
  --danger:       #F08A9E;                /* error text on dark (red is spot CTA only) */
  --bulb-on:      var(--c-tan-light);     /* kept for illustrations */

  /* ---- type ---- */
  --font-he:            "RAG Sans", "Rubik", "Heebo", system-ui, sans-serif;
  --font-display-latin: "Mostra Nuova AltD", "Rubik", sans-serif;
  --font-script:        "Vintage Glamour", Georgia, serif;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.375rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-script: 2.5rem;
  --lh: 1.6;

  /* ---- shape & space (square, thin lines) ---- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 4px;
  --radius-pill: 2px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 36px; --space-7: 56px; --space-8: 80px;
  --page-max: 440px;
  --page-max-wide: 960px;
  --shadow: none;

  /* ---- motion ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}