/*
 * The Sam Siam Practice — design tokens
 * Generated from the Sam Siam Design System. Single source of truth for
 * colour, type, spacing, radii, elevation and motion.
 *
 * Enqueue this FIRST, before the theme stylesheet.
 * Do not edit values here — change them in the design system and regenerate.
 */

/* Fonts. Substitutions pending licensed files:
   Newsreader (display serif) · Public Sans (body) · IBM Plex Mono (eyebrows, figures) */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&family=Public+Sans:ital,wght@0,300..700;1,300..600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  /* --- base: warm ivory / stone --- */
  --ivory:#FAF9F6;--stone:#F4F1EB;--stone-deep:#EBE6DC;--paper-white:#FFFFFF;

  /* --- base: warm ink neutrals --- */
  --ink-900:#16140F;--ink-800:#241F19;--ink-700:#3A342C;--ink-600:#554E44;
  --ink-500:#736A5E;--ink-400:#9A9184;--ink-300:#C2BAAC;--ink-200:#DCD6C9;--ink-100:#E9E4D9;

  /* --- base: brand hues --- */
  --clay-700:#6E3220;--clay-600:#7E3A22;--clay-500:#9A4A2E;--clay-200:#E4CFC5;--clay-100:#F1E5DE;
  --forest-600:#2A4C2F;--forest-500:#355E3B;--forest-100:#E2EAE1;
  --bronze-600:#5E4208;--bronze-500:#75520A;--bronze-100:#EFE7D2;
  --rust-600:#6C2F2A;--rust-500:#843B35;--rust-100:#F1E1DE;

  /* Logo containment blue. Present in the supplied mark only.
     Not part of the palette: never use it for UI, type or fills. */
  --logo-blue:#1D9BD7;

  /* --- semantic: surfaces --- */
  --bg-page:var(--ivory);
  --bg-surface:var(--stone);
  --bg-surface-raised:var(--paper-white);
  --bg-surface-sunken:var(--stone-deep);
  --bg-inverse:var(--ink-900);
  --bg-accent-quiet:var(--clay-100);

  /* --- semantic: text --- */
  --text-display:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-accent:var(--clay-500);
  --text-on-inverse:var(--ivory);
  --text-on-accent:var(--ivory);

  /* --- semantic: lines --- */
  --border-hairline:#E3DDD0;
  --border-soft:var(--ink-200);
  --border-strong:var(--ink-300);
  --border-inverse:rgba(250,249,246,.22);
  --border-focus:var(--clay-500);

  /* --- semantic: interaction --- */
  --action-primary:var(--ink-900);
  --action-primary-hover:var(--ink-800);
  --action-accent:var(--clay-500);
  --action-accent-hover:var(--clay-600);
  --action-accent-active:var(--clay-700);
  --action-quiet-hover:rgba(22,20,15,.045);
  --action-disabled-bg:var(--stone-deep);
  --action-disabled-text:var(--ink-400);

  /* --- semantic: status --- */
  --status-success:var(--forest-500);--status-success-bg:var(--forest-100);
  --status-warning:var(--bronze-500);--status-warning-bg:var(--bronze-100);
  --status-error:var(--rust-500);--status-error-bg:var(--rust-100);
  --status-neutral:var(--ink-500);--status-neutral-bg:var(--stone-deep);

  /* --- selection --- */
  --selection-bg:var(--clay-200);--selection-text:var(--ink-900);
}

:root{
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  /* weights */
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  /* editorial scale, 1.25-ish, generous at the top */
  --fs-display-1:72px;--fs-display-2:56px;--fs-display-3:40px;
  --fs-title-1:30px;--fs-title-2:24px;--fs-title-3:20px;
  --fs-body-lg:19px;--fs-body:17px;--fs-body-sm:15px;
  --fs-caption:13px;--fs-eyebrow:12px;

  /* fluid display for hero use */
  --fs-hero:clamp(40px,6.2vw,72px);

  /* line heights: comfortable, book-like */
  --lh-display:1.08;
  --lh-title:1.2;
  --lh-body:1.65;
  --lh-body-lg:1.55;
  --lh-tight:1.3;

  /* tracking: serif display negative, mono eyebrow wide */
  --ls-display:-0.02em;
  --ls-title:-0.01em;
  --ls-body:0;
  --ls-eyebrow:0.14em;
  --ls-caps:0.08em;

  /* measures */
  --measure-prose:66ch;
  --measure-narrow:38ch;
  --measure-lede:52ch;
}

:root{
  --space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;
  --space-6:24px;--space-7:32px;--space-8:48px;--space-9:64px;--space-10:96px;
  --space-11:128px;--space-12:160px;--space-13:200px;

  /* rhythm aliases: the brand's spacing is set by section, not by component */
  --gap-inline:var(--space-4);
  --gap-stack:var(--space-5);
  --pad-control:10px 18px;
  --pad-card:var(--space-7);
  --pad-card-lg:var(--space-8);
  --section-y:var(--space-11);
  --section-y-tight:var(--space-10);
  --section-y-loose:var(--space-12);
}

:root{
  --container-max:1180px;
  --container-wide:1320px;
  --gutter:32px;
  --gutter-lg:56px;
  --grid-columns:12;
  --grid-gap:32px;
  --header-height:76px;
  --radius-0:0;--radius-1:2px;--radius-2:3px;--radius-3:6px;--radius-pill:999px;
  --border-width:1px;--border-width-heavy:2px;
  --rule:1px solid var(--border-hairline);
}

:root{
  /* Shadows are barely there. Depth comes from hairlines and ivory/stone contrast. */
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-sm:0 1px 2px rgba(22,20,15,.04);
  --shadow-md:0 8px 28px -18px rgba(22,20,15,.18);
  --shadow-lg:0 24px 64px -32px rgba(22,20,15,.24);
  --shadow-focus:0 0 0 2px var(--bg-page),0 0 0 4px var(--clay-200);
  --overlay-scrim:rgba(22,20,15,.34);
  --blur-veil:saturate(120%) blur(10px);
}

:root{
  --dur-instant:90ms;
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:360ms;
  --dur-editorial:620ms;
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(0,.55,.45,1);
  --ease-in-out:cubic-bezier(.45,0,.35,1);
  --transition-control:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
  --transition-reveal:opacity var(--dur-editorial) var(--ease-out),transform var(--dur-editorial) var(--ease-out);
}