/* =========================================================================
   Keron — light theme
   Token values only. All structure and typography live in base.css, which
   never hardcodes a color. dark.css defines this exact same token set at
   different values, so the two files stay swappable one-for-one.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Surfaces — warm paper rather than pure white, to suit the editorial setting */
  --bg:            #FBFAF7;
  --bg-alt:        #F3F2ED;
  --surface:       #FFFFFF;
  --surface-sunk:  #F0EFE9;

  /* Text */
  --text:          #16161A;
  --text-dim:      #55555F;
  --text-faint:    #83838E;
  --text-invert:   #FBFAF7;

  /* Rules and edges */
  --rule:          #E4E2DA;
  --rule-strong:   #C8C6BC;

  /* Accents — indigo/violet from the app icon, darkened for contrast on paper */
  --accent:        #4A41CE;
  --accent-2:      #6E3FD4;
  --accent-soft:   rgba(74, 65, 206, 0.09);
  --signal:        #C63A27;
  --signal-soft:   rgba(198, 58, 39, 0.10);

  /* Code and mono blocks */
  --code-bg:       #F1F0EA;
  --code-text:     #2A2A31;
  --code-rule:     #E0DED5;

  /* Buttons */
  --btn-fg:        #FBFAF7;
  --btn-bg:        #1B1B20;
  --btn-bg-hover:  #35353E;

  /* Effects */
  --shadow-sm:     0 1px 2px rgba(20, 20, 26, 0.06), 0 2px 8px rgba(20, 20, 26, 0.05);
  --shadow-lg:     0 18px 50px rgba(20, 20, 26, 0.13), 0 3px 10px rgba(20, 20, 26, 0.07);
  --selection:     rgba(74, 65, 206, 0.16);
  --focus-ring:    #4A41CE;

  /* The stylized desktop the hero banner sits on */
  --stage-from:    #6F63E4;
  --stage-to:      #C05FB0;
  --stage-bar:     rgba(255, 255, 255, 0.16);
}

/* Header mark: only one of the two theme stylesheets is ever active, so hiding
   the other variant here is enough — it works for the manual override too. */
.mark--dark { display: none; }