/* ==========================================================================
   Roast Lab — Design Tokens
   Dark industrial coffee-roasting theme
   ========================================================================== */

:root {
  /* --- Charcoal scale --- */
  --charcoal-950: #121110;
  --charcoal-900: #1C1A17;
  --charcoal-850: #252220;
  --charcoal-800: #2E2A27;
  --charcoal-700: #3A3531;
  --charcoal-600: #4A443F;
  --charcoal-500: #5C554E;

  /* --- Copper scale --- */
  --copper-900: #8A5225;
  --copper-700: #A86430;
  --copper-500: #C77B3A;
  --copper-400: #D99A5C;
  --copper-300: #E8BC8A;
  --copper-200: #F3DCC0;
  --copper-100: #FAF0E2;

  /* --- Gold scale --- */
  --gold-700: #B8923F;
  --gold-500: #D4A857;
  --gold-300: #E8C77E;
  --gold-100: #F5E4B8;

  /* --- Neutrals --- */
  --cream-100: #F5F0E8;
  --cream-300: #C9C2B8;
  --cream-500: #8C857C;
  --cream-700: #5C554E;

  /* --- Semantic --- */
  --red-500: #D65A4A;
  --red-900: #331E1A;
  --red-700: #8A3A2E;
  --red-300: #E8A89C;
  --green-500: #6B9E6B;
  --green-900: #1E2A22;
  --green-700: #3F6B3F;
  --green-300: #A8C9A8;
  --blue-500: #6A8CA8;
  --blue-900: #1E2A33;
  --blue-700: #4A6C8C;
  --blue-300: #A8C4D9;
  --copper-notice-bg: #2E2418;
  --copper-notice-line: #8A5225;
  --copper-notice-text: #E8BC8A;

  /* --- Roles --- */
  --bg: var(--charcoal-900);
  --bg-deep: var(--charcoal-950);
  --bg-card: var(--charcoal-850);
  --bg-raised: var(--charcoal-800);
  --text: var(--cream-100);
  --text-muted: var(--cream-300);
  --text-dim: var(--cream-500);
  --accent: var(--copper-500);
  --accent-hover: var(--gold-300);
  --link: var(--copper-400);
  --link-hover: var(--gold-300);

  /* --- Borders --- */
  --border: #3A3531;
  --border-strong: #4A443F;
  --border-accent: var(--copper-900);

  /* --- Radius --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-card: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* --- Shadows (dark mode) --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, .4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
  --glow-copper: 0 0 0 1px rgba(199, 123, 58, .3);

  /* --- Motion --- */
  --t-color: .15s ease;
  --t-card: .28s ease;

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 820px;
  --container-wide: 1360px;
  --gutter: 20px;
  --header-h: 56px;

  /* --- Type --- */
  --font-head: "Bitter", "Rockwell", "Georgia", serif;
  --font-body: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: Consolas, "Menlo", "Courier New", monospace;
}