/* Vector's design tokens.
 *
 * Same token NAMES as orbit, helix, core and one — that shared vocabulary is
 * what lets markup and patterns move between the apps. Only the values differ,
 * which is how you know which app you are looking at: orbit green, helix
 * lavender, ignite blue, and vector orange on warm charcoal.
 *
 * VECTOR IS DARK BY DEFAULT. index.html sets `html.dark` before first paint,
 * so the dark palette below is the app's identity rather than an option. The
 * light variant is still defined and still correct — somebody working in a
 * bright room should be able to switch — but dark is what vector is.
 *
 * The neutrals are WARM (#262625, #30302E), not the blue-tinted slate the other
 * apps use. That is the whole character of this palette: a cool grey with an
 * orange accent reads as an accident, a warm grey reads as a decision.
 *
 * ── contrast, measured rather than eyeballed ──────────────────────────────
 * Every value below was checked against the surface it sits on. Two results
 * shaped the palette and are easy to get wrong:
 *
 *   WHITE ON THE ORANGE FAILS (3.12:1). Buttons therefore use near-black on
 *   orange (5.58:1), not white. This is counter-intuitive and is why
 *   --on-primary exists rather than everyone reaching for #fff.
 *
 *   THE ORANGE AS TEXT FAILS ON LIGHT (3.12:1) but passes on dark (4.85:1).
 *   So --primary is safe as text in dark, and --primary-ink is the deeper
 *   shade to use whenever the accent is TEXT on a light surface.
 */

:root {
  /* ── Light variant — warm cream, not white ──────────────────────────────── */
  --bg:             #FAF9F5;
  --canvas-bg:      #FAF9F5;
  --bg-card:        #FFFFFF;
  --card-bg:        #FFFFFF;
  --color-surface:  #FFFFFF;
  --bg-surface:     #F0EEE6;   /* raised / secondary surface */

  --card-border:        #DDD9CE;
  --card-border-strong: #BCB6A7;
  --color-border:       #DDD9CE;

  /* The sidebar is dark in BOTH themes, so its text must not follow
     --text-dark — that flips with the theme and would put charcoal on charcoal
     in light mode. These three stay fixed for that reason. */
  --sidebar-bg:          #262625;
  --sidebar-text:        #F5F4EE;
  --sidebar-nav-text:    #A6A199;
  --sidebar-border:      #3A3A36;

  /* Text — 17.4:1 / 9.3:1 / 5.5:1 on card. Muted is the one that carries most
     small print, so it is deliberately above the 4.5:1 AA line rather than at
     the slate-400 value three of the other apps still ship. */
  --text-primary:   #1A1A18;
  --text-dark:      #1A1A18;
  --text-secondary: #4A4741;
  --text-muted:     #6E6960;
  --text-faint:     #9C9890;   /* decorative only — never body copy */

  --primary:        #D97757;   /* the accent: fills, marks, indicators */
  --primary-dark:   #C2410C;
  --primary-ink:    #C2410C;   /* the accent AS TEXT on light — 5.2:1 */
  --on-primary:     #1A1A18;   /* what goes ON the orange — never white */

  --success:        #3F7D53;
  --warning:        #B4690E;
  --danger:         #B4322F;
  --info:           #4A6FA5;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow:    0 8px 24px rgba(26, 26, 24, 0.10);

  /* ── Aliases for vector's original token names ──────────────────────────
     app.css and the pages still use these. Custom properties resolve at the
     point of USE, so an alias defined once here follows whichever theme is
     active — no need to repeat them in the dark block below. Keeping them
     means the whole stylesheet retokenises without a single edit to it. */
  --text:          var(--text-dark);
  --border:        var(--card-border);
  --surface:       var(--bg-card);
  --surface-soft:  var(--bg-surface);
  --sidebar:       var(--sidebar-bg);
}

html.dark {
  /* ── The dark identity — warm charcoal, not slate ───────────────────────── */
  --bg:             #1A1A18;
  --canvas-bg:      #1A1A18;
  --bg-card:        #262625;
  --card-bg:        #262625;
  --color-surface:  #262625;
  --bg-surface:     #30302E;

  --card-border:        #3A3A36;
  --card-border-strong: #56554F;
  --color-border:       #3A3A36;

  --sidebar-bg:          #131312;
  --sidebar-text:        #F5F4EE;
  --sidebar-nav-text:    #A6A199;
  --sidebar-border:      #2A2A27;

  /* 13.8:1 / 8.8:1 / 5.9:1 on card. Warm off-white rather than pure white —
     #FFF on a warm ground reads cold and glares. */
  --text-primary:   #F5F4EE;
  --text-dark:      #F5F4EE;
  --text-secondary: #C9C5BA;
  --text-muted:     #A6A199;
  --text-faint:     #7A756C;

  --primary:        #D97757;
  --primary-dark:   #E08D6F;   /* brighter on dark, where "darker" would recede */
  --primary-ink:    #E08D6F;   /* the accent as text on dark — 5.9:1 */
  --on-primary:     #1A1A18;

  /* Status colours lifted for a dark ground; the light versions go muddy. */
  --success:        #6FBF8A;
  --warning:        #E0A458;
  --danger:         #E8736F;
  --info:           #8AA9D6;

  --shadow:    0 8px 28px rgba(0, 0, 0, 0.45);
}