/* ============================================================
   THEME — swap colors and fonts here. Nothing else needs editing.
   Loaded AFTER styles.css so these values win.
   ============================================================ */

:root {
  /* ---- Ground and ink ---------------------------------------- */
  --color-bg: #f5edd8; /* page background (cream) */
  --color-surface: #ebe1c5; /* raised panels */
  --color-text: #201f1d; /* body text */

  /* ---- Brand accents ---------------------------------------- */
  --color-accent: #d4a017; /* Golden Wheat — primary accent */
  --color-accent-2: #3f6b4a; /* Forest — second accent */

  /* ---- Tonal ramps -------------------------------------------
     100 = lightest tint, 500 = base, 900 = darkest.
     If you change an accent above, retune its ramp here too:
     100-300 for fills, 500 as base, 700-900 for text on tints.  */
  --color-neutral-100: #f9f6ed;
  --color-neutral-200: #eee9db;
  --color-neutral-300: #dcd5c4;
  --color-neutral-400: #c0b9a5;
  --color-neutral-500: #a19a86;
  --color-neutral-600: #827b6a;
  --color-neutral-700: #645e50;
  --color-neutral-800: #474338;
  --color-neutral-900: #2e2c25;

  --color-accent-100: #fff9eb;
  --color-accent-200: #fff2d0;
  --color-accent-300: #ffe6a5;
  --color-accent-400: #f6d06b;
  --color-accent-500: #d6af48;
  --color-accent-600: #b28d2d;
  --color-accent-700: #8c6d1a;
  --color-accent-800: #644d12;
  --color-accent-900: #403310;

  --color-accent-2-100: #e1fae7;
  --color-accent-2-200: #cceed4;
  --color-accent-2-300: #b2dbbc;
  --color-accent-2-400: #92bf9d;
  --color-accent-2-500: #73a07e;
  --color-accent-2-600: #578162;
  --color-accent-2-700: #3f6348;
  --color-accent-2-800: #2b4732;
  --color-accent-2-900: #1b2e20;

  /* ---- Page roles (built from the tokens above) --------------- */
  --band-sage: var(--color-accent-2-400);      /* "Importing" band */
  --band-terracotta: var(--color-accent-100);  /* "Get help" band  */
  --panel: var(--color-neutral-100);           /* cards, form      */
  --kicker-ink: var(--color-accent-500);       /* small caps label */
  --muted: color-mix(in srgb, var(--color-text) 80%, transparent);
  --muted-soft: color-mix(in srgb, var(--color-text) 68%, transparent);
  --hairline: color-mix(in srgb, var(--color-text) 16%, transparent);

  /* Timeline bars */
  --time-hands-on: var(--color-accent);
  --time-waiting: var(--color-accent-2-400);
  --time-waiting-soft: var(--color-accent-2-300);

  /* Device frames */
  --device-shell: #22211d;
  --device-edge: rgba(255, 255, 255, 0.15);
  --device-key: #3b3932;

  /* ---- Type -------------------------------------------------- */
  --font-heading: "Fraunces", Georgia, serif;
  --font-heading-weight: 600;
  --font-body: "Cormorant", Georgia, serif;

  /* ---- Shape and elevation ----------------------------------- */
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}