/* pocca — Color tokens
 * Warm Precision: bone paper + warm ink + a single bold vermilion accent ("flamme").
 * No big-four navy/gray. No AI-startup purple/neon.
 */

:root {
  /* ---- Base palette : Ink (warm near-black) ---- */
  --ink-900: #1a1613;
  --ink-800: #2a2420;
  --ink-700: #3c3530;
  --ink-600: #574f47;
  --ink-500: #6f665c;
  --ink-400: #8f857a;
  --ink-300: #b3a99c;

  /* ---- Base palette : Paper (warm bone) ---- */
  --paper-000: #ffffff;
  --paper-050: #fbf8f2; /* raised card on canvas */
  --paper-100: #f6f1e7; /* canvas / page background */
  --paper-200: #efe8da; /* sunken / alt band */
  --paper-300: #e6ddca; /* strong fill */

  /* ---- Hairlines & borders (warm) ---- */
  --line-soft: #ebe3d5;
  --line: #ddd3c1;
  --line-strong: #c9bda6;

  /* ---- Accent : Flamme (vermilion) ---- */
  --flame-050: #fdeee7;
  --flame-100: #fbdccf;
  --flame-200: #f6b69c;
  --flame-300: #f08a63;
  --flame-400: #ec6338;
  --flame-500: #e5451c; /* PRIMARY accent */
  --flame-600: #cc3a15;
  --flame-700: #a72f12;

  /* ---- Semantic hues (warm-leaning, restrained) ---- */
  --green-500: #2f7d5b;
  --green-050: #e4f0ea;
  --amber-500: #c2870f;
  --amber-050: #f7ecd4;
  --red-500: #c0271a;
  --red-050: #f7dfdb;
  --teal-500: #2c6e6a; /* info — a hint of cool "tech", never blue */
  --teal-050: #dcecea;

  /* ================= Semantic aliases ================= */

  /* Surfaces */
  --surface-canvas: var(--paper-100);
  --surface-card: var(--paper-050);
  --surface-raised: var(--paper-000);
  --surface-sunken: var(--paper-200);
  --surface-fill: var(--paper-300);
  --surface-inverse: var(--ink-900);
  --surface-accent: var(--flame-500);
  --surface-accent-soft: var(--flame-050);

  /* Text */
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-inverse: var(--paper-100);
  --text-inverse-muted: #b8afa0;
  --text-accent: var(--flame-600);
  --text-on-accent: #ffffff;

  /* Borders */
  --border-soft: var(--line-soft);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --border-accent: var(--flame-500);
  --border-inverse: rgba(246, 241, 231, 0.16);

  /* Interactive */
  --link: var(--flame-600);
  --link-hover: var(--flame-700);

  /* Focus ring */
  --focus-ring: rgba(229, 69, 28, 0.42);
}