/* Sovereign — Color System (Geist foundation)
   The ink is the brand. Grays run 100→1000 where the STEP encodes intent, not just
   lightness (100 background, 300 border, 700 muted text, 1000 ink). Color is voltage:
   the slate-blue accent marks one primary action or a live/verified state; green/amber/red
   carry verification outcomes. Base is a warm near-black (#171717) on white — never pure
   #000/#fff for large fields. Depth comes from borders + spacing, not background hue. */

:root {
  /* ---- Gray scale · intent-encoded ---- */
  --gray-100: #fafafa;  /* subtle surface / hover bg */
  --gray-200: #f2f2f2;  /* active bg / track */
  --gray-300: #ebebeb;  /* default border / divider */
  --gray-400: #e0e0e0;  /* border hover / disabled fill */
  --gray-500: #c9c9c9;  /* strong border */
  --gray-600: #a8a8a8;  /* disabled text */
  --gray-700: #8f8f8f;  /* muted text / captions */
  --gray-800: #666666;  /* secondary text */
  --gray-900: #4d4d4d;  /* strong secondary */
  --gray-1000: #171717; /* ink · primary text & fills */

  --white: #ffffff;
  --black: #000000;

  /* ---- Translucent grays (borders/overlays on any surface) ---- */
  --gray-alpha-100: rgba(0,0,0,0.04);
  --gray-alpha-200: rgba(0,0,0,0.06);
  --gray-alpha-300: rgba(0,0,0,0.08);
  --gray-alpha-400: rgba(0,0,0,0.12);

  /* ---- Accent & semantic · sparing, action/state only ---- */
  --accent: #0a72ef;       /* link · focus · primary action */
  --accent-hover: #0961cc;
  --success: #1a7f52;      /* verified / valid */
  --warning: #c2830a;      /* pending / caution */
  --error: #e5484d;        /* invalid / broken */

  /* ---- Extended voltage (rare, categorical) ---- */
  --brand-ship: #ff5b4f;
  --brand-preview: #de1d8d;

  /* ---- Semantic aliases (theme-flippable) ---- */
  --background: var(--white);
  --surface-1: var(--gray-100);
  --surface-2: var(--gray-200);
  --surface-inverse: var(--gray-1000);

  --text-primary: var(--gray-1000);
  --text-secondary: var(--gray-800);
  --text-muted: var(--gray-700);
  --text-disabled: var(--gray-600);
  --text-on-dark: var(--white);
  --text-link: var(--accent);

  --border-default: var(--gray-300);
  --border-hover: var(--gray-400);
  --border-strong: var(--gray-1000);

  --focus-ring: var(--accent);
}

/* ---- Dark theme · same names, flipped values (polarity inversion) ---- */
[data-theme="dark"] {
  --gray-100: #1a1a1a;
  --gray-200: #212121;
  --gray-300: #2e2e2e;
  --gray-400: #3a3a3a;
  --gray-500: #4d4d4d;
  --gray-600: #666666;
  --gray-700: #8f8f8f;
  --gray-800: #a8a8a8;
  --gray-900: #d4d4d4;
  --gray-1000: #ededed;

  --background: #0a0a0a;
  --surface-1: #141414;
  --surface-2: #1c1c1c;
  --surface-inverse: #ededed;

  --text-primary: #ededed;
  --text-secondary: #a8a8a8;
  --text-muted: #8f8f8f;
  --text-on-dark: #0a0a0a;

  --border-default: #2e2e2e;
  --border-hover: #3a3a3a;
  --border-strong: #ededed;

  --gray-alpha-100: rgba(255,255,255,0.04);
  --gray-alpha-200: rgba(255,255,255,0.06);
  --gray-alpha-300: rgba(255,255,255,0.10);
  --gray-alpha-400: rgba(255,255,255,0.14);
}