/*
  Stone & Ink — design tokens (documentation/DESIGN.md §2–§5).
  The ONLY stylesheet allowed to contain raw colors and sizes. Every page and the other
  stylesheets use these variables, so a change here applies to the whole site at once.
  Type: one family, IBM Plex Sans Hebrew, in light weights; the logo is the only serif.
  Weights are tokens, so a future font swap is a change to this file and fonts.css only.
*/
:root {
  /* §2 Color */
  --stone-0: #FBF9F6;
  --stone-50: #F5F1EB;
  --stone-100: #EDE7DF;
  --stone-200: #DED6CB;
  --stone-300: #CFC6BA;
  --stone-400: #B8AE9F;
  --taupe-500: #9A8B7A;
  --taupe-600: #857563;
  --taupe-700: #6B5D4D;
  --ink-900: #1E1A16;
  --ink-700: #3D3630;
  --ink-500: #6E655C;
  --gold-500: #B9975B;
  --gold-600: #A5853F;
  --white: #FFFFFF;
  --error: #9B3B2E;

  /* §3 Surfaces, hairlines, depth */
  --hairline: 1px solid rgb(154 139 122 / 0.3);
  --hairline-on-dark: 1px solid rgb(222 214 203 / 0.2);
  --shadow-float: 0 12px 32px -8px rgb(30 26 22 / 0.14);
  --overlay-stone: linear-gradient(to bottom, rgb(251 249 246 / 0.92), rgb(251 249 246 / 0));
  --texture-opacity: 0.1;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;
  --radius-lg: 16px;      /* landing-page cards and images (Plan 003 Amendment 1) */
  --radius-xl: 28px;      /* rounded top edge of colored bands */
  --shadow-soft: 0 1px 2px rgb(30 26 22 / 0.06);
  --shadow-card: 0 6px 24px -8px rgb(30 26 22 / 0.16), 0 1px 2px rgb(30 26 22 / 0.06);
  --overlay-ink: linear-gradient(to bottom, rgb(30 26 22 / 0.78), rgb(30 26 22 / 0.6)); /* over photo backgrounds: keeps light text readable */
  --photo-blur: 2px;
  --band-y: 40px;         /* one vertical rhythm between landing-page bands (mobile) */

  /* §4 Typography (mobile values; desktop overrides below) */
  /* One family for Hebrew and Latin: Hebrew can never fall back to a system font. */
  --font-display: 'IBM Plex Sans Hebrew', 'Arial Hebrew', Arial, sans-serif;
  --font-sans: 'IBM Plex Sans Hebrew', 'Arial Hebrew', Arial, sans-serif;
  --weight-display: 200;   /* display, h1 */
  --weight-heading: 300;   /* h2, h3, card and row titles, prices */
  --weight-lead: 300;      /* lead */
  --weight-body: 400;      /* body, small, labels */
  --weight-strong: 500;    /* buttons, nav, field labels, badges */
  --text-display: 2.5rem;  --lh-display: 1.1;
  --text-h1: 2rem;         --lh-h1: 1.15;
  --text-h2: 1.625rem;     --lh-h2: 1.2;
  --text-h3: 1.25rem;      --lh-h3: 1.3;
  --text-lead: 1.125rem;   --lh-lead: 1.6;
  --text-body: 1rem;       --lh-body: 1.6;
  --text-small: 0.875rem;  --lh-small: 1.5;
  --text-eyebrow: 0.8125rem; --lh-eyebrow: 1.2;
  --tracking-label: 0.12em; /* eyebrows and short labels only, echoes the wide-tracked wordmark; never on running text */
  --text-price: 1.75rem;   --lh-price: 1.1;

  /* §5 Spacing (4px base) and layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-30: 120px;
  --gutter: 16px;
  --section-y: var(--space-16);
  --max-site: 1200px;
  --max-lp: 720px;
  --max-prose: 32em;
  --control-h: 48px;
  --control-h-hero: 56px;
  --tap-min: 44px;

  /* §6 Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 240ms;
}

@media (min-width: 768px) {
  :root {
    --text-display: 4rem;
    --text-h1: 3rem;
    --text-h2: 2.25rem;
    --text-h3: 1.625rem;
    --text-lead: 1.1875rem;
    --text-body: 1.0625rem;
    --text-price: 2.25rem;
    --gutter: 24px;
    --section-y: var(--space-30);
    --band-y: 64px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
  }
}