/* koshiFlo — Color tokens
   Philosophy: calm, grounded, precise. Neutral "sumi ink" scale carries most of
   the interface; brand indigo is used sparingly for structure & focus;
   semantic states use distinct hues (never red as dominant brand color) plus
   shape/text/icon redundancy — color never carries meaning alone.

   NOTE: values marked "reconstructed" were blank/truncated in the original
   design handoff (design_handoff_koshiflo/tokens/colors.css). They have been
   filled to match the hue family described in the README and to meet 4.5:1
   text-on-tint contrast. Confirm against final brand assets when available. */

:root {
  /* ---- Neutral / Ink scale (cool, near-black — "sumi ink" palette) ---- */
  --ink-950: #14171B;
  --ink-900: #1B2024;
  --ink-800: #262C33;
  --ink-700: #3A424A;
  --ink-600: #545D66;
  --ink-500: #6B747C;
  --ink-400: #8A929A;
  --ink-300: #A8AFB5;
  --ink-200: #D2D6D9;
  --ink-150: #E0E3E5;
  --ink-100: #E9EBEC;
  --ink-50: #F4F5F5;
  --white: #FFFFFF;

  /* ---- Brand — "Koshi Indigo": disciplined, low-saturation slate blue.
     Reads as an obi/hakama indigo without imitating Japanese textile design. ---- */
  --brand-900: #17262E;
  --brand-800: #1F3542;
  --brand-700: #2C4B5C; /* primary brand color */
  --brand-600: #386074;
  --brand-500: #4A7086;
  --brand-400: #6E8FA0;
  --brand-300: #8FB0BE;
  --brand-200: #C4D8DF;
  --brand-100: #E4EEF1;
  --brand-50: #F2F7F8;

  /* ---- Secondary — "Tatami": warm, grounding stone/sand.
     Used sparingly: milestones, grading accents, achievement moments. ---- */
  --sand-700: #8A6F45;
  --sand-600: #A98B57; /* reconstructed */
  --sand-500: #C4A876; /* reconstructed */
  --sand-300: #DDCBA0;
  --sand-100: #F3ECDD;

  /* ---- Semantic states — each pairs a hue with shape + text elsewhere ---- */

  /* Progressing / on track — sage, circle */
  --state-progress-fg: #35674B;     /* reconstructed */
  --state-progress-bg: #E7F1EA;     /* reconstructed */
  --state-progress-border: #BFD8C6;

  /* Ready to grade — teal, diamond */
  --state-ready-fg: #2B6360;        /* reconstructed */
  --state-ready-bg: #E3EFEE;
  --state-ready-border: #BEDAD8;

  /* Needs attention — ochre, circle (NOT red) */
  --state-attention-fg: #7C5A17;    /* reconstructed */
  --state-attention-bg: #F7EEDB;
  --state-attention-border: #E4CE9E; /* reconstructed */

  /* Behind expected pace — clay, circle */
  --state-risk-fg: #8A4632;         /* reconstructed */
  --state-risk-bg: #F3E2DC;
  --state-risk-border: #E3BFB2;

  /* Paused — neutral grey, square */
  --state-paused-fg: #545D66;       /* reconstructed (ink-600) */
  --state-paused-bg: #ECEDEE;
  --state-paused-border: #D2D6D9;   /* reconstructed (ink-200) */

  /* Informational — brand-tinted */
  --state-info-fg: #2C4B5C;         /* reconstructed (brand-700) */
  --state-info-bg: #E4EEF1;
  --state-info-border: #C4D8DF;

  /* Financial / contractual issue — sand-derived */
  --state-financial-fg: #7A5A1E;
  --state-financial-bg: #F5EBD6;
  --state-financial-border: #E3CD9C;

  /* Destructive action only — one place red appears, restrained */
  --state-destructive-fg: #8C3B3B;
  --state-destructive-bg: #F5E2E2;
  --state-destructive-border: #E0BABA;
  --state-destructive-solid: #9B3B3B;

  /* ---- Surfaces, borders, text (semantic aliases — reference these, not scales) ---- */
  --surface-page: var(--ink-50);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-100);
  --surface-overlay: rgba(20, 23, 27, 0.48);
  --surface-brand-tint: var(--brand-50);

  --border-subtle: var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-400);
  --border-focus: var(--brand-600);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-500);
  --text-on-brand: var(--white);
  --text-link: var(--brand-700);
  --text-link-hover: var(--brand-800);

  /* ---- Dark mode raw values ---- */
  --dark-surface-page: #14171B;
  --dark-surface-card: #1E2328;
  --dark-surface-sunken: #262C33;
  --dark-border-subtle: #2C333A;
  --dark-border-default: #384049;
  --dark-text-primary: #EDEFEF;
  --dark-text-secondary: #AEB4B9;
  --dark-brand-500: #7FA4B4;
}

/* Dark theme scope — apply via [data-theme="dark"] on a root element. */
[data-theme="dark"] {
  --surface-page: var(--dark-surface-page);
  --surface-card: var(--dark-surface-card);
  --surface-sunken: var(--dark-surface-sunken);
  --border-subtle: var(--dark-border-subtle);
  --border-default: var(--dark-border-default);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-link: var(--dark-brand-500);
}