/* ============================================
   variables.css
   Single source of truth for all theme colors.
   :root = dark (default), [data-theme="ivory"] = light.
   No component selectors here - ONLY variables.
   ============================================ */

@font-face {
  font-family: "Alethia Next";
  src: url("../fonts/AlethiaNext-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Typography ---- */
  --font:        "Alethia Next", ui-serif, Georgia, "Times New Roman", serif;
  --font-ui:     ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;

  /* ---- Sizing ---- */
  --radius:      10px;
  --radius2:     12px;
  --sidebar-w:   280px;
  --gap:         18px;

  /* ---- Core palette ---- */
  --bg:          #1a1a1e;
  --text:        #f1f1f1;
  --muted:       rgba(241,241,241,0.80);
  --dim:         rgba(241,241,241,0.55);
  --placeholder: rgba(241,241,241,0.42);
  --text-soft:   rgba(255,255,255,0.92);
  --gold:        #d4b24e;
  --gold2:       rgba(212,178,78,0.35);
  --danger:      #c94b4b;

  /* ---- Gold shades ---- */
  --gold-tint:   rgba(212,178,78,0.06);
  --gold-subtle: rgba(212,178,78,0.12);
  --gold-border: rgba(212,178,78,0.25);
  --gold-dim:    rgba(212,178,78,0.60);

  /* ---- Borders ---- */
  --line:             rgba(212,178,78,0.22);
  --line-strong:      rgba(212,178,78,0.55);
  --gold-focus-ring:  rgba(212,178,78,0.12);
  --gold-hover:       rgba(212,178,78,0.55);
  --divider:          rgba(255,255,255,0.06);

  /* ---- Surfaces ---- */
  --panel:       rgba(32,32,38,0.92);
  --panel2:      rgba(26,26,32,0.92);
  --card-bg:     rgba(22,22,28,0.55);
  --card-bg2:    rgba(32,32,38,0.5);
  --option-bg:   #28282e;
  --overlay-bg:  rgba(0,0,0,0.65);
  --wall:        #4a4a52;

  /* ---- Inputs ---- */
  --input-bg:       rgba(22,22,28,0.65);
  --input-border:   var(--line);
  --input-color:    var(--text);
  --input-autofill: #1a1a1e;

  /* ---- Buttons ---- */
  --btn-bg-from:     rgba(32,32,38,0.92);
  --btn-bg-to:       rgba(24,24,30,0.92);
  --btn-hover-from:  rgba(38,38,44,0.92);
  --btn-hover-to:    rgba(28,28,34,0.92);
  --btn-submit-from: rgba(212,178,78,0.18);
  --btn-submit-to:   rgba(212,178,78,0.06);
  --btn-submit-border: var(--line-strong);

  /* ---- Sidebar ---- */
  --sidebar-from:  rgba(32,32,38,0.96);
  --sidebar-to:    rgba(24,24,30,0.96);

  /* ---- Body background ---- */
  --body-grad1:    rgba(212,178,78,0.10);
  --body-grad2:    rgba(212,178,78,0.06);
  --body-bg-start: #161618;
  --body-bg-mid:   #1a1a1e;
  --body-bg-end:   #161618;

  /* ---- Shadows ---- */
  --shadow:      0 10px 30px rgba(0,0,0,0.45);
  --shadow2:     0 8px 18px rgba(0,0,0,0.35);
  --shadow-card: 0 1px 0 0 rgba(212,178,78,0.08) inset, 0 20px 50px rgba(0,0,0,0.4);

  /* ---- List rows ---- */
  --list-row-bg: rgba(22,22,28,0.55);

  /* ---- Status: success ---- */
  --success:        #4caf50;
  --success-bg:     rgba(76,175,80,0.2);
  --success-text:   #4caf50;
  --success-dim:    rgba(76,175,80,0.5);
  --success-border: rgba(76,175,80,0.3);

  /* ---- Status: danger ---- */
  --danger-bg:     rgba(201,75,75,0.15);
  --danger-border: rgba(201,75,75,0.3);
  --danger-text:   #e57373;

  /* ---- Status: warning ---- */
  --warning-bg:     rgba(255,152,0,0.15);
  --warning-border: rgba(255,152,0,0.30);
  --warning-text:   #ffb74d;

  /* ---- Status: info ---- */
  --info-bg:        rgba(100,181,246,0.12);
  --info-border:    rgba(100,181,246,0.25);
  --info-text:      #90caf9;

  /* ---- Scrollbar ---- */
  --scrollbar-track: rgba(0,0,0,0.2);
  --scrollbar-thumb: rgba(212,178,78,0.25);
  --scrollbar-hover: rgba(212,178,78,0.45);
    --gold-accent:    #d4b24e;
    --gold-mid:       #d4b24e;
    --gold-dark:      #b89044;
    --muted-dim:      rgba(241,241,241,0.62);
}


/* ---- Ivory / Pearl theme ---- */
[data-theme="ivory"] {
  /* Core palette */
  --bg:          #ece7da;
  --text:        #302818;
  --muted:       rgba(48,40,24,0.80);
  --dim:         rgba(48,40,24,0.68);
  --placeholder: rgba(48,40,24,0.55);
  --text-soft:   rgba(48,40,24,0.82);
  --gold:        #7a6520;
  --gold2:       rgba(160,130,45,0.30);
  --danger:      #b03535;

  /* Gold shades */
  --gold-tint:   rgba(160,130,45,0.06);
  --gold-subtle: rgba(160,130,45,0.12);
  --gold-border: rgba(160,130,45,0.30);
  --gold-dim:    rgba(160,130,45,0.65);

  /* Borders */
  --line:             rgba(160,130,45,0.35);
  --line-strong:      rgba(160,130,45,0.55);
  --gold-focus-ring:  rgba(160,130,45,0.30);
  --gold-hover:       rgba(160,130,45,0.60);
  --divider:          rgba(160,130,45,0.15);

  /* Surfaces */
  --panel:       rgba(253,252,248,0.99);
  --panel2:      rgba(248,246,240,0.98);
  --card-bg:     rgba(253,252,248,0.90);
  --card-bg2:    rgba(248,246,240,0.85);
  --option-bg:   #fdfcf8;
  --overlay-bg:  rgba(48,40,32,0.30);
  --wall:        #8a8478;

  /* Inputs */
  --input-bg:       rgba(255,255,255,0.98);
  --input-border:   var(--line);
  --input-color:    var(--text);
  --input-autofill: #fff;

  /* Buttons */
  --btn-bg-from:     rgba(253,252,248,0.99);
  --btn-bg-to:       rgba(244,241,232,0.99);
  --btn-hover-from:  rgba(255,254,250,1);
  --btn-hover-to:    rgba(248,245,236,1);
  --btn-submit-from: rgba(160,130,45,0.15);
  --btn-submit-to:   rgba(160,130,45,0.06);
  --btn-submit-border: var(--line-strong);

  /* Sidebar */
  --sidebar-from:  rgba(232,227,214,0.99);
  --sidebar-to:    rgba(226,221,208,0.99);

  /* Body background */
  --body-grad1:    rgba(184,148,47,0.04);
  --body-grad2:    rgba(184,148,47,0.03);
  --body-bg-start: #efe9dc;
  --body-bg-mid:   #ece7da;
  --body-bg-end:   #e8e3d6;

  /* Shadows */
  --shadow:      0 4px 18px rgba(80,60,20,0.12);
  --shadow2:     0 3px 12px rgba(80,60,20,0.10);
  --shadow-card: 0 8px 32px rgba(80,60,20,0.12);

  /* List rows */
  --list-row-bg: rgba(253,252,248,0.85);

  /* Status: success */
  --success:        #2d8a3a;
  --success-bg:     rgba(60,140,70,0.12);
  --success-text:   #2d8a3a;
  --success-dim:    rgba(60,140,70,0.5);
  --success-border: rgba(60,140,70,0.3);

  /* Status: danger */
  --danger-bg:     rgba(176,53,53,0.12);
  --danger-border: rgba(176,53,53,0.25);
  --danger-text:   #c04040;

  /* Status: warning */
  --warning-bg:     rgba(230,126,0,0.12);
  --warning-border: rgba(230,126,0,0.25);
  --warning-text:   #c47a00;

  /* Status: info */
  --info-bg:        rgba(30,120,200,0.10);
  --info-border:    rgba(30,120,200,0.22);
  --info-text:      #1a6fb5;

  /* Scrollbar */
  --scrollbar-track: rgba(232,227,214,0.5);
  --scrollbar-thumb: rgba(160,130,45,0.40);
  --scrollbar-hover: rgba(160,130,45,0.60);
    --gold-accent:    #a08228;
    --gold-mid:       #8a7020;
    --gold-dark:      #5a4a15;
    --muted-dim:      rgba(48,40,24,0.73);
}


/* ---- Theme transition ---- */
html[data-theme-transitioning] *,
html[data-theme-transitioning] *::before,
html[data-theme-transitioning] *::after {
  transition: background 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease !important;
}