/* === WMW Color Tokens ===
   Light defaults on :root; dark overrides on :root[data-theme="dark"].
   Channel-triplet format (R G B) for Tailwind opacity modifier support.
   Light is the first-visit default (Task 7.2 will flip the PHP stamp).
   During the build, the PHP stamp defaults to dark. */

/* --- Steel scale (LIGHT values — near-black at 50, near-white at 900) --- */
:root {
  --steel-50-rgb:  26 25 23;     /* #1A1917 — near-black text on light bg */
  --steel-100-rgb: 51 48 44;     /* #33302C */
  --steel-200-rgb: 86 80 73;     /* #565049 */
  --steel-300-rgb: 95 89 79;     /* #5F594F — muted text; darkened from #6E685F so small text clears AA 4.5:1 on the lightest surfaces (footer/light bands) */
  --steel-400-rgb: 183 177 168;  /* #B7B1A8 */
  --steel-500-rgb: 216 211 204;  /* #D8D3CC */
  --steel-600-rgb: 228 224 217;  /* #E4E0D9 */
  --steel-700-rgb: 251 250 248;  /* #FBFAF8 */
  --steel-800-rgb: 244 242 239;  /* #F4F2EF — light page background */
  --steel-900-rgb: 233 229 223;  /* #E9E5DF */

  /* --- Orange scale --- */
  --wmw-orange-rgb: 246 99 50;        /* #F66332 fills/buttons */
  --wmw-orange-lit-rgb: 255 102 51;   /* #FF6633 hover */
  --wmw-orange-deep-rgb: 208 78 30;   /* #D04E1E active */
  --wmw-orange-ink-rgb: 179 64 15;    /* #B3400F text in light (AA on #F4F2EF) */

  /* --- Semantic aliases: LIGHT defaults --- */
  --wmw-bg: #F4F2EF;
  --wmw-surface: #FBFAF8;
  --wmw-text: #1A1917;
  --wmw-text-muted: #565049;
  --wmw-border: #D4D0CB;
  --wmw-accent: rgb(var(--wmw-orange-rgb));
  --wmw-accent-ink: rgb(var(--wmw-orange-ink-rgb));

  /* --- Status tokens --- */
  --wmw-success: #2E7D32;
  --wmw-error: #C62828;
  --wmw-error-tint: #FFCCBC;
  --wmw-error-bg: #FBE9E7;

  /* --- Status channel triplets (LIGHT — for rgba() tinting) --- */
  --wmw-success-rgb: 46 125 50;    /* #2E7D32 */
  --wmw-error-rgb:   198 40 40;    /* #C62828 */
  --wmw-pending-rgb: 180 83 9;     /* #B45309 */
  --wmw-info-rgb:    29 78 216;    /* #1D4ED8 */

  /* --- Shadow tokens --- */
  --wmw-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  --wmw-shadow-accent: 0 4px 16px rgba(246, 99, 50, 0.20);

  /* --- Pending + Info status tokens --- */
  --wmw-pending: #B45309;
  --wmw-info:    #1D4ED8;

  /* --- Checkout off-palette tokens: LIGHT values --- */
  --wmw-ck-void:        #F4F2EF;
  --wmw-ck-bg:          #FBFAF8;
  --wmw-ck-void-soft:   #E9E5DF;
  --wmw-ck-slate:       #E4E0D9;
  --wmw-ck-slate-mid:   #A9A49C;
  --wmw-ck-slate-muted: #928D84;
  --wmw-ck-orange:      #FF7742;
  --wmw-ck-salmon:      #C44E1E;
  --wmw-ck-rust:        #A83520;
  --wmw-ck-orange-dk:   #B3400F;
  --wmw-ck-rust-deep:   #8B2E18;

  /* --- Checkout channel-triplet variants (LIGHT) --- */
  --wmw-ck-void-rgb: 244 242 239;  /* #F4F2EF */
  --wmw-ck-rust-rgb: 168 53 32;    /* #A83520 */

  /* --- Checkout divider/row tokens (theme-aware) --- */
  --wmw-divider:   rgb(var(--wmw-orange-rgb) / 0.25);
  --wmw-row-line:  rgb(26 25 23 / 0.06);   /* steel-50 light @ 6% */
  --wmw-head-line: rgb(26 25 23 / 0.10);   /* steel-50 light @ 10% */

  /* --- Texture --- */
  --wmw-noise-opacity: 0.02;  /* faint tactile warmth in light */
}

/* --- Dark overrides --- */
:root[data-theme="dark"] {
  /* Steel channel triplets: dark mode (near-white at 50, near-black at 900) */
  --steel-50-rgb:  236 234 231;  /* #ECEAE7 */
  --steel-100-rgb: 212 208 203;  /* #D4D0CB */
  --steel-200-rgb: 169 164 156;  /* #A9A49C */
  --steel-300-rgb: 146 141 132;  /* #928D84 */
  --steel-400-rgb: 79 75 69;     /* #4F4B45 */
  --steel-500-rgb: 51 48 44;     /* #33302C */
  --steel-600-rgb: 36 34 32;     /* #242220 */
  --steel-700-rgb: 26 25 23;     /* #1A1917 */
  --steel-800-rgb: 23 21 15;     /* #17150F */
  --steel-900-rgb: 16 15 10;     /* #100F0A */
  --wmw-orange-ink-rgb: 246 99 50; /* bright orange is fine on dark bg */

  /* --- Semantic aliases: DARK values --- */
  --wmw-bg: #17150F;
  --wmw-surface: #1A1917;
  --wmw-text: #ECEAE7;
  --wmw-text-muted: #A9A49C;
  --wmw-border: #33302C;
  --wmw-accent: rgb(var(--wmw-orange-rgb));        /* orange unchanged */
  --wmw-accent-ink: rgb(var(--wmw-orange-rgb));    /* orange-ink = bright in dark */

  /* --- Status tokens dark --- */
  --wmw-success: #66BB6A;
  --wmw-error: #E57373;
  --wmw-error-tint: #4E1E1A;
  --wmw-error-bg: #3A1410;

  /* --- Status channel triplets (DARK — for rgba() tinting) --- */
  --wmw-success-rgb: 102 187 106;  /* #66BB6A */
  --wmw-error-rgb:   229 115 115;  /* #E57373 */
  --wmw-pending-rgb: 255 201 77;   /* #FFC94D */
  --wmw-info-rgb:    111 177 255;  /* #6FB1FF */

  /* --- Shadow tokens dark --- */
  --wmw-shadow: 0 4px 20px rgba(0, 0, 0, 0.50);
  --wmw-shadow-accent: 0 4px 24px rgba(246, 99, 50, 0.35);

  /* --- Pending + Info status tokens (dark) --- */
  --wmw-pending: #FFC94D;
  --wmw-info:    #6FB1FF;

  /* --- Checkout off-palette tokens: DARK values --- */
  --wmw-ck-void:        #0F0E0D;
  --wmw-ck-bg:          #141311;
  --wmw-ck-void-soft:   #2A2824;
  --wmw-ck-slate:       #2F3448;
  --wmw-ck-slate-mid:   #565865;
  --wmw-ck-slate-muted: #8B8D9A;
  --wmw-ck-orange:      #FF7742;
  --wmw-ck-salmon:      #E07B63;
  --wmw-ck-rust:        #C8422C;
  --wmw-ck-orange-dk:   #C44E24;
  --wmw-ck-rust-deep:   #B8462A;

  /* --- Checkout channel-triplet variants (DARK) --- */
  --wmw-ck-void-rgb: 15 14 13;     /* #0F0E0D */
  --wmw-ck-rust-rgb: 200 66 44;    /* #C8422C */

  /* --- Checkout divider/row tokens: DARK overrides --- */
  --wmw-row-line:  rgb(236 234 231 / 0.06);  /* steel-50 dark @ 6% */
  --wmw-head-line: rgb(236 234 231 / 0.10);  /* steel-50 dark @ 10% */

  /* --- Texture --- */
  --wmw-noise-opacity: 0.035;  /* subtle noise overlay in dark */
}