/* ─────────────────────────────────────────────────────────────────────────
   restorno-ui v2 · tokens.css — the single source of truth for every Restorno
   surface. Served from https://id.restorno.com/ui/v2/tokens.css so one change
   lands on every app at once. Versioned path: breaking changes go to /ui/v3/.

   ONE system, TWO surfaces, ONE gold:
     • Brand  (default) — warm cream + gold + serif. For com / store / co.il.
     • App    (.r-app / [data-r-surface="app"]) — dark espresso-navy, SAME gold.
       For online / site / meeting and any tool or dashboard.

   Components (ui.css) never hardcode a colour — they read the semantic tokens
   below, so the same markup renders correctly on either surface.

   Compat: every v1 token name (--r-cream, --r-ink, --r-gold …) still resolves,
   so existing v1 markup keeps working while you migrate.
   ───────────────────────────────────────────────────────────────────────── */

/* Hebrew type: one sans, one serif, everywhere. Apps are not under an artifact
   CSP, so a real webfont load is fine here. Falls back to system Hebrew faces. */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Frank+Ruhl+Libre:wght@500;700;900&display=swap');

:root {
  /* ── raw brand — CONSTANT across both surfaces ─────────────────────────── */
  --r-espresso:   #2a1d12;
  --r-espresso-2: #3b2a1c;
  --r-gold:       #c9a35c;   /* canonical Restorno gold (matches restorno.com + the logo lettering) */
  --r-gold-soft:  #d9b678;
  --r-gold-deep:  #a8813f;
  --r-cta:        #6b4a2a;
  --r-cta-2:      #8a6a30;
  /* wine — the "restored velvet" red from the Restorno logo. Secondary brand
     accent, used in small doses (links, active states, dividers), never
     competing with the gold. */
  --r-wine:       #8a1f2b;
  --r-wine-2:     #6d1822;
  --r-wine-soft:  rgba(138, 31, 43, .12);

  /* ── semantic — Brand surface (light) is the default ───────────────────── */
  --r-bg:       #f6f1e7;   /* page ground            */
  --r-bg-2:     #efe7d8;   /* secondary ground       */
  --r-surface:  #fdfaf4;   /* cards / raised panels  */
  --r-surface-2:#f6efe2;   /* hover / inset          */
  --r-ink:      #2b2117;   /* primary text           */
  --r-ink-soft: #5a4e3b;   /* secondary text         */
  --r-muted:    #8b7d6b;   /* captions / meta        */
  --r-line:     rgba(107, 74, 42, .18);
  --r-line-strong: rgba(107, 74, 42, .32);
  --r-accent:   var(--r-gold);
  --r-accent-soft: rgba(201, 163, 92, .14);
  --r-on-accent:#3a2a14;

  /* semantic status — separate from the gold accent */
  --r-danger:   #9d3b2f;
  --r-danger-soft: rgba(157, 59, 47, .12);
  --r-ok:       #2e7d5b;
  --r-ok-soft:  rgba(46, 125, 91, .12);
  --r-warn:     #b8892b;

  /* ── v1 aliases (do not remove — existing markup depends on these) ─────── */
  --r-cream:    var(--r-bg);
  --r-cream-2:  var(--r-bg-2);
  --r-parchment:#e7dcc6;

  /* ── scale ─────────────────────────────────────────────────────────────── */
  --r-radius-sm: 10px;
  --r-radius:    14px;
  --r-radius-lg: 20px;
  --r-radius-pill: 999px;

  --r-space-1: 4px;
  --r-space-2: 8px;
  --r-space-3: 12px;
  --r-space-4: 16px;
  --r-space-5: 24px;
  --r-space-6: 32px;
  --r-space-7: 48px;

  --r-shadow:    0 6px 24px rgba(42, 29, 18, .12);
  --r-shadow-lg: 0 14px 40px rgba(42, 29, 18, .22);
  --r-focus:     0 0 0 2px var(--r-bg), 0 0 0 4px var(--r-gold);

  --r-rail: 232px;
  --r-rail-collapsed: 62px;
  --r-header: 58px;

  /* ── type ──────────────────────────────────────────────────────────────── */
  --r-sans:  "Heebo", "Assistant", "Rubik", -apple-system, "Segoe UI", sans-serif;
  --r-serif: "Frank Ruhl Libre", "David Libre", "Noto Serif Hebrew", Georgia, serif;
  --r-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --r-text-xs: 12px;
  --r-text-sm: 13.5px;
  --r-text-md: 15px;
  --r-text-lg: 18px;
  --r-h3: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  --r-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  --r-h1: clamp(2rem, 1.4rem + 3vw, 3.2rem);
}

/* ─── Dark "App" surface — same gold, dark espresso-navy ground ──────────── */
.r-app,
[data-r-surface="app"] {
  --r-bg:       #14100b;
  --r-bg-2:     #1b150d;
  --r-surface:  #1f1810;
  --r-surface-2:#2a2015;
  --r-ink:      #f0e9da;
  --r-ink-soft: #c9bda5;
  --r-muted:    #a2937a;
  --r-line:     rgba(224, 180, 92, .16);
  --r-line-strong: rgba(224, 180, 92, .3);

  --r-gold:     #e0b45c;   /* brightened for legibility on dark */
  --r-gold-soft:#eecb82;
  --r-accent:   var(--r-gold);
  --r-accent-soft: rgba(224, 180, 92, .14);
  --r-on-accent:#14100b;

  --r-danger:   #e57368;
  --r-danger-soft: rgba(229, 115, 104, .16);
  --r-ok:       #5fcb9b;
  --r-ok-soft:  rgba(95, 203, 155, .16);
  --r-warn:     #e0b45c;

  --r-shadow:    0 6px 24px rgba(0, 0, 0, .45);
  --r-shadow-lg: 0 20px 52px rgba(0, 0, 0, .6);
  --r-focus:     0 0 0 2px var(--r-bg), 0 0 0 4px var(--r-gold);

  --r-cream:   var(--r-bg);
  --r-cream-2: var(--r-bg-2);
}

/* Optional: let a whole app opt into dark via the OS preference.
   Add class "r-auto-dark" to <html> to enable. Explicit .r-app always wins. */
@media (prefers-color-scheme: dark) {
  .r-auto-dark:not(.r-app):not([data-r-surface="app"]) {
    --r-bg:#14100b; --r-bg-2:#1b150d; --r-surface:#1f1810; --r-surface-2:#2a2015;
    --r-ink:#f0e9da; --r-ink-soft:#c9bda5; --r-muted:#a2937a;
    --r-line:rgba(224,180,92,.16); --r-line-strong:rgba(224,180,92,.3);
    --r-gold:#e0b45c; --r-gold-soft:#eecb82; --r-accent:var(--r-gold);
    --r-accent-soft:rgba(224,180,92,.14); --r-on-accent:#14100b;
    --r-danger:#e57368; --r-ok:#5fcb9b; --r-warn:#e0b45c;
    --r-shadow:0 6px 24px rgba(0,0,0,.45); --r-shadow-lg:0 20px 52px rgba(0,0,0,.6);
    --r-cream:var(--r-bg); --r-cream-2:var(--r-bg-2);
  }
}