/* ============================================================
   TOKENS — synced 1:1 with tissaconsulting.com production main.css
   ============================================================ */
:root {
  /* Production palette (exact match) */
  --tissa-white: #ffffff;
  --tissa-offwhite: #fbf9f5;
  --tissa-carbon: #252628;
  --tissa-carbon-light: #3a3a3d;
  --tissa-carbon-muted: #6b6b6f;
  --tissa-border: #e5e5e5;
  --tissa-border-dark: #d0d0d0;
  --tissa-accent: #252628;
  --tissa-green: #16a34a;
  --tissa-red: #dc2626;

  /* Semantic aliases used by components.css (kept for back-compat) */
  --tissa-ink: var(--tissa-carbon);
  --tissa-paper: var(--tissa-offwhite);
  --tissa-bone: var(--tissa-white);
  --tissa-seal: var(--tissa-carbon);
  --tissa-graphite: var(--tissa-carbon-muted);
  --tissa-line: var(--tissa-border);
  --tissa-success: var(--tissa-green);
  --tissa-warning: #b75000;

  /* Typography (production fonts) */
  --ff-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --ff-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ff-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ff-script: "Allura", "Pinyon Script", "Sacramento", cursive;

  /* Legacy aliases */
  --ff-ui: var(--ff-body);

  --fs-display-xl: clamp(56px, 8vw, 96px);
  --fs-h1: clamp(40px, 6vw, 72px);
  --fs-h2: clamp(28px, 4vw, 48px);
  --fs-h3: clamp(22px, 2.6vw, 32px);
  --fs-h4: clamp(18px, 1.8vw, 24px);
  --fs-body-lg: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;
  --fs-mono: 14px;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 112px;
  --space-8: 160px;

  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 880px;
  --container-text: 720px;
  --container-pad-d: 80px;
  --container-pad-t: 48px;
  --container-pad-m: 24px;

  --radius: 4px;
  --radius-lg: 8px;
  --border-thin: 1px solid var(--tissa-border);
  --border-ink: 1px solid var(--tissa-carbon);
  --shadow-soft: 0 1px 2px rgba(37, 38, 40, 0.04), 0 8px 24px rgba(37, 38, 40, 0.06);

  --transition: 180ms cubic-bezier(0.2, 0, 0, 1);
}

::selection { background: var(--tissa-carbon); color: var(--tissa-white); }

/* ============================================================ */
/* Aliases for legacy prod CSS (login.css) — font tokens         */
/* ============================================================ */
:root {
  --font-playfair: var(--ff-display);
  --font-source-serif: var(--ff-body);
  --font-mono: var(--ff-mono);
}