/* ============================================================
   Shirokuro — Design Tokens
   Custom properties only. Consumed by main.css and inline styles.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --ink: #0a0a0a;
  --paper: #fafafa;

  --gray-50:  #f4f4f4;
  --gray-100: #e8e8e8;
  --gray-200: #d4d4d4;
  --gray-400: #9a9a9a;
  --gray-600: #585858;
  --gray-800: #2a2a2a;
  --gray-900: #141414;

  --overlay-ink: rgb(10 10 10 / 0.7);
  --overlay-ink-soft: rgb(10 10 10 / 0.4);

  --surface: var(--paper);
  --surface-inverse: var(--ink);

  --header-bg: rgb(250 250 250 / 0.95);
  --bg-image: url('/assets/backgrounds/background-light.jpg');
  --scrim: rgb(250 250 250 / 0.95);
  --scrim-strong: rgb(250 250 250 / 0.98);

  /* ---------- Type scale (fluid) ---------- */
  --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --step-0:  clamp(1rem,      0.96rem + 0.2vw,  1.0625rem);
  --step-1:  clamp(1.125rem,  1.06rem + 0.3vw,  1.25rem);
  --step-2:  clamp(1.375rem,  1.26rem + 0.55vw, 1.625rem);
  --step-3:  clamp(1.75rem,   1.5rem  + 1.2vw,  2.375rem);
  --step-4:  clamp(2.25rem,   1.8rem  + 2.2vw,  3.5rem);
  --step-5:  clamp(3rem,      2.2rem  + 3.8vw,  5.5rem);
  --step-6:  clamp(4rem,      2.8rem  + 5.8vw,  8rem);

  /* ---------- Font families ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Spacing (8px base) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad-x: clamp(1.25rem, 5vw, 3rem);
  --measure: 65ch;

  /* ---------- Borders & radii ---------- */
  --border-hairline: 1px solid var(--gray-200);
  --border-hairline-inverse: 1px solid rgb(250 250 250 / 0.2);
  --radius-0: 0;
  --radius-sm: 2px;

  /* ---------- Motion ---------- */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med:  360ms;
  --dur-slow: 620ms;

  /* ---------- Z-index ---------- */
  --z-header: 50;
  --z-nav-overlay: 60;
  --z-skip: 100;
}

/* ---------- Dark theme (Kuro) ---------- */
:root[data-theme="dark"] {
  --ink: #fafafa;
  --paper: #0a0a0a;

  /* Mirror the gray scale so muted text stays legible on the inverted paper.
     gray-400 stays as a true mid-tone (works in both themes). The rest flip
     so secondary copy keeps WCAG AA contrast on the dark surface. */
  --gray-50:  #141414;
  --gray-100: #2a2a2a;
  --gray-200: #585858;
  --gray-600: #a8a8a8;
  --gray-800: #e8e8e8;
  --gray-900: #f4f4f4;

  --overlay-ink: rgb(250 250 250 / 0.7);
  --overlay-ink-soft: rgb(250 250 250 / 0.4);

  --border-hairline: 1px solid rgb(250 250 250 / 0.12);
  --border-hairline-inverse: 1px solid rgb(10 10 10 / 0.2);

  --header-bg: rgb(10 10 10 / 0.95);
  --bg-image: url('/assets/backgrounds/background-dark.jpg');
  --scrim: rgb(10 10 10 / 0.92);
  --scrim-strong: rgb(10 10 10 / 0.97);
}