/* ============================================
   SPODIC - CSS Variables & Theme Definitions
   ============================================ */

/* --- Ember (Default) --- */
:root,
[data-theme="ember"] {
  --bg:               #252525;
  --reader-bg:        #252525;
  --text:             #e0e0e0;
  --text-muted:       #6b6b6b;
  --text-subtle:      #3a3a3a;

  --orp-color:        #d63944;
  --accent-glow:      rgba(214, 57, 68, 0.12);
  --guide-color:      rgba(200, 200, 200, 0.30);

  --control-bg:       rgba(43, 43, 43, 0.92);
  --control-border:   rgba(255, 255, 255, 0.06);
  --control-hover:    rgba(255, 255, 255, 0.08);
  --control-active:   rgba(255, 255, 255, 0.12);

  --sidebar-bg:       #2a2a2a;
  --sidebar-border:   #383838;

  --bg-surface:       #2f2f2f;
  --bg-input:         #2d2d2d;
  --accent:           #d63944;
  --accent-dim:       rgba(214, 57, 68, 0.08);

  --error:            #ca4754;
  --success:          #5a9a64;

  /* Non-theme tokens */
  --nav-width: 56px;
  --rsvp-font-size: clamp(3rem, 10vw, 7rem);
  --rsvp-letter-spacing: -0.02em;
  --app-font-family: "Inter", system-ui, sans-serif;
  --app-font-weight: 400;
  --rsvp-font-weight: 400;
  --rsvp-orp-weight: 500;
  --radius: 10px;
  --transition: 200ms ease;
}

/* --- Paper (Light) --- */
[data-theme="paper"] {
  --bg:               #f5f4f1;
  --reader-bg:        #f5f4f1;
  --text:             #1c1c1c;
  --text-muted:       #7a7a7a;
  --text-subtle:      #b0b0b0;

  --orp-color:        #c0313b;
  --accent-glow:      rgba(192, 49, 59, 0.10);
  --guide-color:      rgba(40, 40, 40, 0.20);

  --control-bg:       rgba(255, 255, 255, 0.92);
  --control-border:   rgba(0, 0, 0, 0.07);
  --control-hover:    rgba(0, 0, 0, 0.04);
  --control-active:   rgba(0, 0, 0, 0.07);

  --sidebar-bg:       #eae8e4;
  --sidebar-border:   #d8d5d0;

  --bg-surface:       #ffffff;
  --bg-input:         #edecea;
  --accent:           #c0313b;
  --accent-dim:       rgba(192, 49, 59, 0.06);

  --error:            #b82d38;
  --success:          #3d7a47;
}

/* --- Sakura (Soft Pink) --- */
[data-theme="sakura"],
[data-theme="flower"] {
  --bg:               #fce8ee;
  --reader-bg:        #fce8ee;
  --text:             #2e1a1f;
  --text-muted:       #7a5b63;
  --text-subtle:      #b8909a;

  --orp-color:        #e8517a;
  --accent-glow:      rgba(232, 81, 122, 0.14);
  --guide-color:      #c9a0aa;

  --control-bg:       rgba(252, 232, 238, 0.94);
  --control-border:   rgba(46, 26, 31, 0.10);
  --control-hover:    rgba(46, 26, 31, 0.06);
  --control-active:   rgba(46, 26, 31, 0.10);

  --sidebar-bg:       #f8dbe4;
  --sidebar-border:   #e8c2cd;

  --bg-surface:       #fff2f6;
  --bg-input:         #f8dde5;
  --accent:           #e8517a;
  --accent-dim:       rgba(232, 81, 122, 0.10);

  --error:            #c7446a;
  --success:          #568f66;
}

/* --- Midnight (Navy) --- */
[data-theme="midnight"] {
  --bg:               #121825;
  --reader-bg:        #121825;
  --text:             #c8cdd8;
  --text-muted:       #5c6478;
  --text-subtle:      #333b4e;

  --orp-color:        #40b8c4;
  --accent-glow:      rgba(64, 184, 196, 0.10);
  --guide-color:      rgba(180, 190, 210, 0.22);

  --control-bg:       rgba(18, 24, 42, 0.90);
  --control-border:   rgba(255, 255, 255, 0.05);
  --control-hover:    rgba(255, 255, 255, 0.07);
  --control-active:   rgba(255, 255, 255, 0.10);

  --sidebar-bg:       #0e1320;
  --sidebar-border:   #1c2338;

  --bg-surface:       #1a2035;
  --bg-input:         #0c1018;
  --accent:           #40b8c4;
  --accent-dim:       rgba(64, 184, 196, 0.08);

  --error:            #c45858;
  --success:          #58a878;
}

/* --- Matcha (Green) --- */
[data-theme="matcha"] {
  --bg:               #161a14;
  --reader-bg:        #161a14;
  --text:             #cdd4c5;
  --text-muted:       #636b59;
  --text-subtle:      #353b30;

  --orp-color:        #8ab45e;
  --accent-glow:      rgba(138, 180, 94, 0.10);
  --guide-color:      rgba(180, 195, 165, 0.22);

  --control-bg:       rgba(22, 28, 20, 0.90);
  --control-border:   rgba(255, 255, 255, 0.05);
  --control-hover:    rgba(255, 255, 255, 0.07);
  --control-active:   rgba(255, 255, 255, 0.10);

  --sidebar-bg:       #121610;
  --sidebar-border:   #232a1f;

  --bg-surface:       #1e231b;
  --bg-input:         #0e1210;
  --accent:           #8ab45e;
  --accent-dim:       rgba(138, 180, 94, 0.08);

  --error:            #c46050;
  --success:          #72a84c;
}

/* --- Slate (Purple/Grey) --- */
[data-theme="slate"] {
  --bg:               #1a1a1e;
  --reader-bg:        #1a1a1e;
  --text:             #b8b8bf;
  --text-muted:       #5e5e66;
  --text-subtle:      #35353b;

  --orp-color:        #9580e6;
  --accent-glow:      rgba(149, 128, 230, 0.10);
  --guide-color:      rgba(175, 175, 185, 0.24);

  --control-bg:       rgba(26, 26, 32, 0.90);
  --control-border:   rgba(255, 255, 255, 0.05);
  --control-hover:    rgba(255, 255, 255, 0.07);
  --control-active:   rgba(255, 255, 255, 0.10);

  --sidebar-bg:       #141418;
  --sidebar-border:   #242428;

  --bg-surface:       #222226;
  --bg-input:         #111114;
  --accent:           #9580e6;
  --accent-dim:       rgba(149, 128, 230, 0.08);

  --error:            #c45868;
  --success:          #68a878;
}