/*
 * tokens.css - single design-token vocabulary for michaelharley.net
 *
 * Defines the semantic CSS custom properties used across the site.
 * Values bind to the BBS theme by default. The classic theme
 * (currently in style.css with its own --text-color/--link-color vars)
 * will be migrated to use these tokens incrementally.
 *
 * Load order: this file is loaded BEFORE bbs.css and style.css in
 * base.njk so semantic names are available to subsequent stylesheets.
 *
 * See STYLE.md (repo root) for design reasoning and migration plan.
 */

/* --- Default theme: light ----------------------------------------- */
:root {
  /* Surfaces */
  --color-bg:          #f5f1e8;                          /* warm paper */
  --color-bg-alt:      #ece7d5;                          /* elevated surfaces: menus, code */

  /* Text */
  --color-text:        #0a1128;                          /* body text */
  --color-heading:     #0a1128;                          /* headings */
  --color-muted:       #5a5d68;                          /* de-emphasized text */

  /* Links */
  --color-link:        #0e7490;                          /* link color (cyan) */
  --color-link-hover:  #b42318;                          /* link hover */

  /* Accents */
  --color-accent:      #0e7490;                          /* primary accent (cyan) */
  --color-accent-warm: #b45309;                          /* secondary accent (amber) */
  --color-accent-loud: #b42318;                          /* alert / critical (red) */

  /* Structure */
  --color-rule:        rgba(10, 17, 40, 0.15);           /* borders, dividers */
  --color-code-bg:     #ece7d5;                          /* inline + block code */
  --color-focus:       #0e7490;                          /* focus ring */

  /* Fonts */
  --font-mono:         'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-body:         'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* Type scale (1.125 modular) */
  --text-xs:           0.75rem;
  --text-sm:           0.85rem;
  --text-base:         1rem;
  --text-md:           1.125rem;
  --text-lg:           1.25rem;
  --text-xl:           1.5rem;
  --text-2xl:          1.875rem;
}

/* --- Auto-dark via prefers-color-scheme --------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:          #0d1117;
    --color-bg-alt:      #161b22;
    --color-text:        #c9d1d9;
    --color-heading:     #c9d1d9;
    --color-muted:       #8b949e;
    --color-link:        #39c5cf;
    --color-link-hover:  #ff6b6b;
    --color-accent:      #39c5cf;
    --color-accent-warm: #f5b041;
    --color-accent-loud: #ff6b6b;
    --color-rule:        rgba(230, 237, 243, 0.13);
    --color-code-bg:     #161b22;
    --color-focus:       #39c5cf;
  }
}

/* --- Explicit dark via [data-theme="dark"] ------------------------ */
:root[data-theme="dark"] {
  --color-bg:          #0d1117;
  --color-bg-alt:      #161b22;
  --color-text:        #c9d1d9;
  --color-heading:     #c9d1d9;
  --color-muted:       #8b949e;
  --color-link:        #39c5cf;
  --color-link-hover:  #ff6b6b;
  --color-accent:      #39c5cf;
  --color-accent-warm: #f5b041;
  --color-accent-loud: #ff6b6b;
  --color-rule:        rgba(230, 237, 243, 0.13);
  --color-code-bg:     #161b22;
  --color-focus:       #39c5cf;
}