/* ============ THEMING ============
   Light mode is the DEFAULT and is never removed — :root ships the light
   values. Dark mode is opt-in: data-theme="dark" on <html>, <body>, or any
   subtree. data-theme="light" re-scopes a region back to light inside a dark
   page (e.g. a white product tile). Same token names in both modes — every
   component adapts with no theme-specific fork. */

:root, [data-theme="light"] {
  color-scheme: light;

  /* ============ BRAND & ACCENT ============ */
  --primary: #3B82F6;          /* Electric Blue — the only chromatic event; filled CTA, dot accent, wordmark accent */
  --primary-deep: #2563EB;     /* pressed / hover state of primary */
  --primary-soft: #93C5FD;     /* chart accents, data-viz, subtle UI highlights */

  --accent-success: #22C55E;   /* stock-in / active / confirmed status only */
  --accent-warning: #F59E0B;   /* low-stock / pending / caution status only */
  --accent-danger:  #EF4444;   /* out-of-stock / error / critical status only */
  --accent-purple:  #6B01C2;   /* rare — category badges, chart points only */

  /* ============ SURFACE ============ */
  --canvas: #FFFFFF;           /* default page & app background */
  --canvas-soft: #FAFAFA;      /* alternating bands, table zebra stripes */
  --canvas-night: #1C1C1C;     /* featured panels, dark callouts, dark UI mockups */
  --canvas-night-soft: #202020;/* nested chrome within dark surfaces */

  --hairline: #DFDFDF;         /* 1px borders on cards, rows, fields */
  --hairline-strong: #C7C7C7;  /* section dividers, emphasis borders */
  --hairline-cool: #EDEDED;    /* fine chrome */
  --hairline-cool-2: #EFEFEF;  /* zebra stripe */
  --hairline-cool-3: #D4D4D4;  /* fine chrome darker */

  /* ============ TEXT / INK ============ */
  --ink: #171717;              /* default body — near-black, never pure */
  --ink-secondary: #212121;    /* sub-headings, label emphasis */
  --ink-mute: #707070;         /* secondary text, helper copy, sub-values */
  --ink-mute-2: #9A9A9A;       /* tertiary text, timestamps, metadata */
  --ink-faint: #B2B2B2;        /* disabled labels, placeholder text */
  --on-primary: #FFFFFF;       /* text + logo on electric blue fill — white */
  --on-dark: #FFFFFF;          /* text on canvas-night surfaces */

  /* ============ STATUS PILL TINTS (15% of accent) ============ */
  --tint-success: rgba(34, 197, 94, 0.15);
  --tint-warning: rgba(245, 158, 11, 0.15);
  --tint-danger:  rgba(239, 68, 68, 0.15);
  --tint-primary: rgba(59, 130, 246, 0.15);
}

/* ============ DARK MODE ============
   Opt-in remap. Primary blue and the semantic accents stay constant;
   ink ladder inverts (near-white, never pure); hairlines darken;
   shadows deepen (separation stays hairline-first); status tints
   strengthen to 22% for legibility on dark. */
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --canvas: #141414;           /* page & app background */
  --canvas-soft: #1C1C1C;      /* alternating bands, zebra stripes */
  --canvas-night: #262626;     /* featured panels — an elevated surface in dark */
  --canvas-night-soft: #2C2C2C;/* nested chrome within featured panels */

  --hairline: #333333;
  --hairline-strong: #454545;
  --hairline-cool: #2A2A2A;
  --hairline-cool-2: #232323;
  --hairline-cool-3: #3D3D3D;

  /* Ink — inverted ladder */
  --ink: #F2F2F2;              /* near-white, never pure */
  --ink-secondary: #E5E5E5;
  --ink-mute: #A6A6A6;
  --ink-mute-2: #808080;
  --ink-faint: #595959;

  /* Status tints — 22% on dark */
  --tint-success: rgba(34, 197, 94, 0.22);
  --tint-warning: rgba(245, 158, 11, 0.22);
  --tint-danger:  rgba(239, 68, 68, 0.22);
  --tint-primary: rgba(59, 130, 246, 0.22);

  /* Elevation — deeper shadows so lift stays perceptible on dark */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.40);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.55);
}