/* ==========================================================================
   basecoat.tokens.css — design tokens only (no element styles)
   --------------------------------------------------------------------------
   The token layer of basecoat: the color palette (light + dark), type scale,
   spacing, fonts, and border tokens as CSS custom properties. Nothing else —
   no reset, no base element styles.

   Use this when a project already has its own component CSS and just wants to
   source the design language (and dark mode) from basecoat:

       <link rel="stylesheet" href="basecoat.tokens.css">

   Then reference the tokens: color: var(--fg); font-family: var(--font-ui); …

   Want the full system (reset + typography + buttons + tables + …)? Link
   `basecoat.css` instead — it embeds this exact token set. Keep the two token
   blocks below in sync with the Tokens sections of basecoat.css.
   ========================================================================== */


/* TOKENS (LIGHT) =========================================================== */

:root {
  /* --- Core palette --- */
  --bg:      #f5f5f0;   /* warm off-white page background */
  --fg:      #1a1a1a;   /* near-black primary text / strong hairlines */
  --dim:     #888888;   /* muted / secondary text, inactive controls */
  --border:  #cccccc;   /* soft hairline dividers */
  --hi-bg:   #e8e8e0;   /* highlight background (primary row / hover) */
  --accent:  #e0301e;   /* the single chromatic accent (warm red) */

  /* --- Semantic colors (muted to fit; error reuses the house red) --- */
  --success: #4a7a4a;   /* muted forest/olive */
  --warning: #b8801f;   /* warm ochre */
  --danger:  #e0301e;   /* the house red */
  --info:    #4a6a8a;   /* muted slate */

  /* --- Fonts --- */
  --font-ui:   "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Type scale (clean, 4-based, 12 -> 64) --- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  --text-5xl:  40px;   /* display */
  --text-6xl:  48px;   /* display */
  --text-7xl:  64px;   /* display / hero numerals */

  --leading: 1.45;

  /* --- Letter-spacing --- */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;

  /* --- Spacing (4px scale) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* --- Borders --- */
  --border-strong: 1px solid var(--fg);
  --border-soft:   1px solid var(--border);
  --radius: 0;

  /* --- Layout --- */
  --measure: 640px;

  color-scheme: light dark;
}


/* TOKENS (DARK) ============================================================ */
/* Applies to viewers who prefer dark, and to any element under
   [data-theme="dark"]. Both are honored; [data-theme="light"] opts out. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #16140f;
    --fg:      #f5f5f0;
    --dim:     #8a8880;
    --border:  #333331;
    --hi-bg:   #24221c;
    --accent:  #ff5a3c;

    --success: #7aa96a;
    --warning: #d6a23a;
    --danger:  #ff5a3c;
    --info:    #7a9ac0;
  }
}

:root[data-theme="dark"] {
  --bg:      #16140f;
  --fg:      #f5f5f0;
  --dim:     #8a8880;
  --border:  #333331;
  --hi-bg:   #24221c;
  --accent:  #ff5a3c;

  --success: #7aa96a;
  --warning: #d6a23a;
  --danger:  #ff5a3c;
  --info:    #7a9ac0;
}