/* Bisoux — Color tokens.
   One warm neutral family in shades. Dark red (--accent) is the ONLY brand accent
   and must touch ~10% of any screen at most: one button, one dot, one active tab.
   Day = default. Night = .dark or prefers-color-scheme: dark. */

:root, .light {
  /* ---- Base palette: the warm neutral family (day) ---- */
  --warm-0:  #ECE6DC; /* page bg */
  --warm-1:  #F4EFE5; /* surfaces, cards */
  --warm-2:  #DBD3C7; /* borders, dividers, image wells */
  --warm-ink-2: #7B726E; /* secondary text, inactive icons */
  --warm-ink:   #1A1613; /* primary text & headings */

  /* ---- The one accent ---- */
  --accent:      #7E2A2A; /* actions, links, active, the bisou */
  --accent-soft: rgba(126, 42, 42, 0.10); /* tints, hover wells */
  --kiss-red:    #B22A3C; /* the kiss-mark artwork red */

  /* ---- Semantic UI states — never the brand accent ---- */
  --success: #5F7A5E; /* muted sage — confirmations */
  --warning: #C08A3A; /* muted amber — alerts only */
  --error:   #BC4A39; /* clearer red than brand, so errors != actions */

  /* ---- Semantic aliases (use these in components) ---- */
  --bg:             var(--warm-0);
  --surface:        var(--warm-1);
  --surface-sunken: #E7E0D4;
  --border:         var(--warm-2);
  --text:           var(--warm-ink);
  --text-secondary: var(--warm-ink-2);
  --accent-contrast: #F4EFE5; /* text/icon on an accent fill */

  color-scheme: light;
}

.dark {
  /* ---- Base palette (night): candlelit near-black, never pure black ---- */
  --warm-0:  #131110; /* page bg */
  --warm-1:  #1E1A18; /* surfaces, cards */
  --warm-2:  #2C2724; /* borders, dividers */
  --warm-ink-2: #8F8980; /* secondary text & labels */
  --warm-ink:   #E9E1D3; /* primary text & headings */

  --accent:      #A8403A; /* lifted so it glows on near-black */
  --accent-soft: rgba(168, 64, 58, 0.14);

  --surface-sunken: #181513;
  --accent-contrast: #F4EFE5;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --warm-0:  #131110;
    --warm-1:  #1E1A18;
    --warm-2:  #2C2724;
    --warm-ink-2: #8F8980;
    --warm-ink:   #E9E1D3;
    --accent:      #A8403A;
    --accent-soft: rgba(168, 64, 58, 0.14);
    --surface-sunken: #181513;
    color-scheme: dark;
  }
  /* explicit .light wins over OS dark (higher specificity) */
  :root.light {
    --warm-0:  #ECE6DC;
    --warm-1:  #F4EFE5;
    --warm-2:  #DBD3C7;
    --warm-ink-2: #7B726E;
    --warm-ink:   #1A1613;
    --accent:      #7E2A2A;
    --accent-soft: rgba(126, 42, 42, 0.10);
    --surface-sunken: #E7E0D4;
    color-scheme: light;
  }
}