/* Dekel Ben Tal design system - portable tokens. Source: tokens.json (dekelbental.com, Oct 2026). */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:wght@400;500;600;700&family=Rubik:wght@300..800&display=swap");

:root, [data-theme="light"] {
  /* palette */
  --palette-ink: #0e0e0e;
  --palette-ink-2: #1a1a1a;
  --palette-paper: #f5f1ea;
  --palette-paper-2: #ebe5da;
  --palette-line: #ddd5c8;
  --palette-mute: #6b665e;
  --palette-mute-dark: #a9a49c;
  --palette-orange: #f28c38;
  --palette-orange-text: #c96a1e;
  --palette-orange-deep: #a65514;

  /* semantic - Paper theme */
  --surface: var(--palette-paper);
  --surface-raised: var(--palette-paper-2);
  --surface-accent: var(--palette-orange);
  --text: var(--palette-ink);
  --text-soft: rgba(14, 14, 14, 0.75);
  --text-muted: var(--palette-mute);
  --text-on-accent: var(--palette-ink);
  --accent: var(--palette-orange);
  --accent-text: var(--palette-orange-deep);
  --accent-display: var(--palette-orange-text);
  --inverse-surface: var(--palette-ink);
  --inverse-text: var(--palette-paper);
  --line: var(--palette-line);
  --border: rgba(14, 14, 14, 0.15);
  --border-strong: var(--palette-ink);
  --field: rgba(245, 241, 234, 0.6);
  --field-focus: #ffffff;
  --focus-ring: var(--palette-orange);

  /* shadows */
  --shadow-raised: 0 12px 30px rgba(14, 14, 14, 0.15);
  --shadow-float: 0 30px 80px rgba(14, 14, 14, 0.18);
  --shadow-overlay: 0 40px 90px rgba(14, 14, 14, 0.25);
  --shadow-focus-halo: 0 0 0 8px rgba(242, 140, 56, 0.18);
  --shadow-glow: 0 10px 40px rgba(242, 140, 56, 0.45);
  --shadow-dock: 0 14px 40px rgba(14, 14, 14, 0.35);
}

[data-theme="dark"] {
  --surface: var(--palette-ink);
  --surface-raised: var(--palette-ink-2);
  --text: var(--palette-paper);
  --text-soft: rgba(245, 241, 234, 0.8);
  --text-muted: var(--palette-mute-dark);
  --accent-text: var(--palette-orange);
  --accent-display: var(--palette-orange);
  --inverse-surface: var(--palette-paper);
  --inverse-text: var(--palette-ink);
  --line: rgba(245, 241, 234, 0.1);
  --border: rgba(245, 241, 234, 0.2);
  --border-strong: var(--palette-paper);
  --field: rgba(26, 26, 26, 0.6);
  --field-focus: var(--palette-ink-2);
}

:root {
  /* type */
  --font-display: "Bricolage Grotesque", Rubik, system-ui, sans-serif;
  --font-sans: Inter, Rubik, system-ui, sans-serif;
  --font-hebrew: Rubik, system-ui, sans-serif;
  --type-display-xl: clamp(44px, 7vw, 108px);
  --type-display-l: clamp(32px, 4.5vw, 66px);
  --type-quote: clamp(26px, 3.5vw, 54px);
  --type-title: 40px;
  --type-heading: 24px;
  --type-lede: 20px;
  --type-body: 17px;
  --type-eyebrow: 14px;
  --type-meta: 13px;
  --tracking-display: -0.04em;
  --tracking-display-rtl: -0.01em;
  --tracking-eyebrow: 0.18em;

  /* space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 28px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* radius */
  --radius-sm: 4px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-feature: 28px; --radius-pill: 999px;

  /* layout */
  --container-max: 1400px; --measure-lede: 620px; --measure-copy: 440px;

  /* motion */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-default: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-base: 350ms;
  --duration-slow: 500ms;
}