/* ==========================================================================
   Codersheary design tokens
   Shared by the personal site (/) and Codersheary Studio (/studio).
   ========================================================================== */

:root {
  /* Palette */
  --paper: #F8F7F4;
  --paper-deep: #F0EEE9;
  --stone: #E8E6E2;
  --ink: #191919;
  --ink-soft: #57534E;      /* secondary text, 6.9:1 on paper */
  --ink-faint: #8A857E;     /* metadata only, large/short strings */
  --lavender: #C9B5F5;
  --lavender-soft: #E6DCFB;
  --purple: #7452B8;        /* 5.4:1 on paper */
  --purple-deep: #5B3D9A;

  /* Type */
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Gochi Hand", "Comic Sans MS", cursive;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem);
  --text-display: clamp(2.6rem, 1.4rem + 5.2vw, 6rem);

  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-body: 1.6;

  /* Space (4/8 rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --wide: 1200px;
  --measure: 62ch;

  /* Shape */
  --radius-sm: 6px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow: 0 1px 1px rgb(25 25 25 / 0.04), 0 10px 24px -12px rgb(25 25 25 / 0.22);
  --shadow-lift: 0 2px 2px rgb(25 25 25 / 0.05), 0 22px 40px -18px rgb(25 25 25 / 0.32);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  --focus: 2px solid var(--purple);
}
