/*
 * Search-box.ai
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File: apps/web/styles/tokens.css
 * Description: Design token system — every component derives from these variables.
 */

:root {
  /* color — light, warm, technical-editorial */
  --paper: #faf9f5;
  --paper-deep: #f3f1ea;
  --surface: #ffffff;
  --ink: #1a1712;
  --ink-soft: #6b6459;
  --ink-faint: #a39b8d;
  --hairline: #e8e3d8;
  --hairline-strong: #d8d1c2;

  --accent: #c8431a;        /* burnt vermilion — the one bold element */
  --accent-deep: #a53512;
  --accent-soft: #faeae3;
  --teal: #157068;          /* supports / verified */
  --teal-soft: #e2efed;
  --amber: #96660a;         /* uncertain */
  --amber-soft: #f7ecd3;
  --plum: #5f4b9e;          /* synthesis / writing */
  --plum-soft: #edeaf7;
  --red: #a02020;
  --red-soft: #fbecea;

  /* type */
  --font-display: var(--font-fraunces), "Georgia", serif;
  --font-body: var(--font-instrument), -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: var(--font-mono-face), "SF Mono", "Menlo", monospace;
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-hero: clamp(2.1rem, 6vw, 3.6rem);

  /* spacing & radii */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* elevation */
  --e-1: 0 1px 2px rgba(26, 23, 18, 0.05);
  --e-2: 0 1px 2px rgba(26, 23, 18, 0.05), 0 6px 20px rgba(26, 23, 18, 0.06);
  --e-3: 0 2px 4px rgba(26, 23, 18, 0.06), 0 16px 40px rgba(26, 23, 18, 0.1);

  /* motion */
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --t-fast: 140ms;
  --t-med: 300ms;
}