/* ============================================================
   Swatch Four — DARK THEME
   The brand's primary web aesthetic (swatchfour.com is dark).
   Light/cream is the alternate mode. Dark is applied by setting
   data-theme="dark" on <html> (or any ancestor). Only semantic
   aliases are remapped — every component that references them
   flips automatically. Base palette values are unchanged.

   Signature dark moves (pulled from the live site):
   - warm near-black paper, film stills sit full-bleed on it
   - headlines can carry a butter-yellow accent (--text-heading)
   - primary CTA inverts to a cream fill with dark text
   - hairlines and cards lift only slightly off the background
   ============================================================ */

[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — warm near-black, cards lift subtly */
  --surface-page:      #0E0E0B;
  --surface-page-dark: #000000;
  --surface-card:      #17170F;
  --surface-raised:    #1C1C13;
  --surface-inset:     #201F15;
  --surface-invert:    var(--sf-cream);   /* "invert" now means a light panel */

  /* Text — warm off-white on black */
  --text-primary:      #F3F1E3;
  --text-secondary:    #B9B7A6;
  --text-muted:        #85857A;
  --text-heading:      var(--sf-yellow);  /* butter-yellow headline accent */
  --text-invert:       var(--sf-black);   /* text on light/inverted panels */
  --text-invert-muted: #56564C;
  --text-accent:       var(--sf-yellow);
  --text-on-accent:    var(--sf-black);

  /* Lines & borders — quiet, warm, barely-there */
  --border-hair:   #29291F;
  --border-soft:   #38382C;
  --border-strong: #4A4A3C;
  --border-invert: #D8D8CC;   /* hairlines on a light/inverted panel */

  /* Interactive — primary CTA becomes a cream fill */
  --accent:         var(--sf-cream);
  --accent-hover:   #F0F0D8;
  --accent-press:   #E4E4CC;
  --accent-2:       var(--sf-yellow);      /* accent shifts orange->yellow in dark */
  --accent-2-hover: #F6EDBB;

  /* Focus ring */
  --focus-ring: color-mix(in oklab, var(--sf-yellow) 60%, transparent);

  /* Status — lifted for contrast on black */
  --status-ok:    #8FB07A;
  --status-warn:  #D8AE5A;
  --status-error: #D9765F;
}

/* Selection stays on-brand in dark */
[data-theme="dark"] ::selection {
  background: var(--sf-yellow);
  color: var(--sf-black);
}