/* ==========================================================================
   SAKANA — design tokens (Editorial direction)
   Change brand colors, type and rhythm here only.
   Maps to Shopify theme settings later (see SHOPIFY_MIGRATION_PLAN.md).
   ========================================================================== */

:root {
  /* Color */
  --paper: #f4eee5;        /* page background */
  --paper-2: #ebe3d7;      /* image wells, footer */
  --cream: #fbf8f3;        /* raised surfaces, story band */
  --ink: #2a2320;          /* text, primary buttons */
  --ink-2: #3a312c;        /* image wells on dark */
  --soft: #6d6158;         /* secondary text (AA on paper) */
  --line: #d6cabb;         /* hairlines */
  --accent: #7a2d25;       /* oxblood */
  --accent-soft: #d9a796;  /* accent on dark backgrounds */
  --on-dark: #f4eee5;
  --on-dark-soft: rgba(244, 238, 229, 0.72);

  /* Type */
  --f-serif: "Frank Ruhl Libre", "Times New Roman", serif;
  --f-sans: "Assistant", system-ui, -apple-system, sans-serif;
  --f-latin: "Cormorant Garamond", "Frank Ruhl Libre", serif;

  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-base: 17px;
  --fs-lg: 19px;
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-h2: clamp(28px, 3.2vw, 44px);
  --fs-h1: clamp(36px, 4.6vw, 68px);
  --fs-mega: clamp(64px, 14vw, 240px);

  /* Space & layout */
  --g: clamp(18px, 4vw, 64px);          /* page gutter */
  --section: clamp(48px, 6vw, 96px);    /* vertical section rhythm (tightened in phase 1C) */
  --max: 1520px;
  --header-h: 64px;
  --header-h-compact: 56px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.3s;
  --t: 0.6s;
  --t-slow: 1.2s;

  /* Layers */
  --z-header: 50;
  --z-drawer: 80;
  --z-toast: 90;

  /* Direction. Layout uses logical properties (inline-start/end) and mirrors by
     itself; these cover the few physical values left: transforms and origins. */
  --dirx: 1;              /* +1 in Hebrew (RTL), −1 in English (LTR) — multiply X movement */
  --start-side: right;    /* physical side where a line of text starts */
}

:root[dir="ltr"] {
  --dirx: -1;
  --start-side: left;
}

/* English (British) typography: Cormorant Garamond carries the display type
   (Frank Ruhl Libre is a Hebrew face); Assistant stays for body text. */
:root:lang(en) {
  --f-serif: "Cormorant Garamond", "Times New Roman", serif;
  --f-latin: "Cormorant Garamond", "Times New Roman", serif;
}