/* lumiflo — Color system
   Monochrome-first. White 60% · Ink 30% · Gray 9% · Accent/Semantic 1%.
   Color is restrained; the diagonal pattern + type hierarchy carry expression. */

:root {
  /* ── Primary — Ink (brand black). Main = ink-500 ── */
  --color-ink-50:  #F2F2F3;
  --color-ink-100: #D8D8DA;
  --color-ink-300: #8A8A8E;
  --color-ink-500: #1A1A1A;   /* ★ main ink */
  --color-ink-700: #000000;   /* pure black / diagonal-pattern field */

  /* ── Secondary — Paper (brand white). Main = paper-50 ── */
  --color-paper-50:  #FFFFFF;  /* ★ default canvas */
  --color-paper-100: #FAFAFA;
  --color-paper-300: #F2F2F2;
  --color-paper-500: #E8E8E8;
  --color-paper-700: #DADADA;

  /* ── Neutral — Gray (7 steps) ── */
  --color-neutral-50:  #FAFAFA;
  --color-neutral-100: #F4F4F5;
  --color-neutral-200: #E4E4E7;
  --color-neutral-300: #D4D4D8;
  --color-neutral-400: #A1A1AA;
  --color-neutral-500: #71717A;
  --color-neutral-700: #3F3F46;

  /* ── Brand point palette: Coral & Violet variations ──
     The accent + state palette is built from just TWO hues — coral (warm)
     and violet (cool) — in tint→shade variations. Overall design stays
     white/black; these appear sparingly (one accent area per screen). */

  /* Coral variations (warm — emphasis · Stage.V™) */
  --color-coral-50:  #FBE7E9;
  --color-coral-100: #F7CED2;
  --color-coral-300: #EC8892;
  --color-coral-500: #E0394A;   /* ★ coral base */
  --color-coral-700: #AF2C3A;
  --color-coral-900: #701C25;

  /* Violet variations (cool — interactive · Stage.N™) */
  --color-violet-50:  #EEE7F8;
  --color-violet-100: #DBCDF1;
  --color-violet-300: #A988DE;
  --color-violet-500: #7038C8;   /* ★ violet base */
  --color-violet-700: #572C9C;
  --color-violet-900: #381C64;

  /* Accent — Signal (violet, one place per screen, max) */
  --color-accent:      var(--color-violet-500);
  --color-accent-soft: var(--color-violet-50);
  --color-accent-ink:  var(--color-violet-900);

  /* Service point colors (rare, service-tied — one small touch like an icon) */
  --color-stagev:      var(--color-coral-500);   /* Stage.V™ — coral */
  --color-stagen:      var(--color-violet-500);  /* Stage.N™ — violet */
  --color-stagev-soft: rgba(224, 57, 74, 0.12);
  --color-stagen-soft: rgba(112, 56, 200, 0.12);

  /* ── Semantic — state only (functional, distinct hues) ── */
  --color-success: #2E7D55;
  --color-warning: #C77700;
  --color-error:   #C62828;
  --color-info:    #2D5FE0;

  /* ── Role tokens (use these in product code) ── */
  --surface-base:    #FFFFFF;   /* default background */
  --surface-raised:  #FAFAFA;   /* subtle raised panel */
  --surface-sunken:  #F4F4F5;   /* sunken / track */
  --surface-ink:     #000000;   /* dark surface / on pattern */

  --text-primary:    #1A1A1A;
  --text-secondary:  #71717A;
  --text-tertiary:   #A1A1AA;
  --text-inverse:    #FFFFFF;
  --text-accent:     var(--color-violet-500);

  --border-subtle:   #F2F2F2;
  --border-default:  #E4E4E7;
  --border-strong:   #1A1A1A;

  --focus-ring:      rgba(0, 0, 0, 0.08);
  --focus-ring-accent: rgba(112, 56, 200, 0.20);
}