/*
 * This is a manifest file that'll be compiled into application.css.
 */

/* ── Default theme (Tango Light) ── */
:root,
[data-theme="default"] {
  --color-bg:           #eeeeec;   /* aluminium1 */
  --color-surface:      #ffffff;
  --color-border:       #babdb6;   /* aluminium3 */
  --color-divide:       #d3d7cf;   /* aluminium2 */
  --color-text:         #2e3436;   /* aluminium6 */
  --color-text-muted:   #555753;   /* aluminium5 */
  --color-text-subtle:  #888a85;   /* aluminium4 */
  --color-nav-bg:       #3465a4;   /* sky blue3 */
  --color-nav-link:     #d3d7cf;   /* aluminium2 */
  --color-nav-pill-bg:  #ffffff;
  --color-nav-pill-fg:  #3465a4;
  --color-accent:       #3465a4;   /* sky blue3 */
  --color-accent-hover: #204a87;   /* sky blue4 */
  --color-accent-light: #d8e4f2;
  --color-accent-text:  #204a87;   /* sky blue4 */
  --color-notice-bg:    #edf7df;
  --color-notice-border:#73d216;   /* chameleon2 */
  --color-notice-text:  #4e9a06;   /* chameleon3 */
  --color-alert-bg:     #fde4df;
  --color-alert-border: #ef2929;   /* scarlet red2 */
  --color-alert-text:   #a40000;   /* scarlet red3 */
}

/* ── Solarized Light ── */
[data-theme="solarized-light"] {
  --color-bg:           #fdf6e3;   /* base3 */
  --color-surface:      #eee8d5;   /* base2 */
  --color-border:       #93a1a1;   /* base1 */
  --color-divide:       #eee8d5;   /* base2 */
  --color-text:         #657b83;   /* base00 */
  --color-text-muted:   #839496;   /* base0 */
  --color-text-subtle:  #93a1a1;   /* base1 */
  --color-nav-bg:       #268bd2;   /* blue */
  --color-nav-link:     #b0d4ef;
  --color-nav-pill-bg:  #fdf6e3;
  --color-nav-pill-fg:  #268bd2;
  --color-accent:       #268bd2;   /* blue */
  --color-accent-hover: #1a6fa8;
  --color-accent-light: #ddeeff;
  --color-accent-text:  #1a6fa8;
  --color-notice-bg:    #f0fff4;
  --color-notice-border:#2aa198;   /* cyan */
  --color-notice-text:  #2aa198;
  --color-alert-bg:     #fff5f5;
  --color-alert-border: #dc322f;   /* red */
  --color-alert-text:   #dc322f;
}

/* ── Solarized Dark ── */
[data-theme="solarized-dark"] {
  --color-bg:           #002b36;   /* base03 */
  --color-surface:      #073642;   /* base02 */
  --color-border:       #586e75;   /* base01 */
  --color-divide:       #073642;   /* base02 */
  --color-text:         #839496;   /* base0 */
  --color-text-muted:   #657b83;   /* base00 */
  --color-text-subtle:  #586e75;   /* base01 */
  --color-nav-bg:       #073642;   /* base02 */
  --color-nav-link:     #93a1a1;   /* base1 */
  --color-nav-pill-bg:  #268bd2;
  --color-nav-pill-fg:  #fdf6e3;
  --color-accent:       #268bd2;   /* blue */
  --color-accent-hover: #1a6fa8;
  --color-accent-light: #073642;
  --color-accent-text:  #93a1a1;   /* base1 */
  --color-notice-bg:    #073642;
  --color-notice-border:#2aa198;   /* cyan */
  --color-notice-text:  #2aa198;
  --color-alert-bg:     #073642;
  --color-alert-border: #dc322f;   /* red */
  --color-alert-text:   #dc322f;
}

/* ── GitHub Light ── */
[data-theme="github-light"] {
  --color-bg:           #f6f8fa;
  --color-surface:      #ffffff;
  --color-border:       #d0d7de;
  --color-divide:       #d8dee4;
  --color-text:         #24292f;
  --color-text-muted:   #57606a;
  --color-text-subtle:  #6e7781;
  --color-nav-bg:       #24292f;
  --color-nav-link:     #f6f8fa;
  --color-nav-pill-bg:  #ffffff;
  --color-nav-pill-fg:  #0969da;
  --color-accent:       #0969da;
  --color-accent-hover: #0550ae;
  --color-accent-light: #ddf4ff;
  --color-accent-text:  #0969da;
  --color-notice-bg:    #dafbe1;
  --color-notice-border:#1a7f37;
  --color-notice-text:  #116329;
  --color-alert-bg:     #ffebe9;
  --color-alert-border: #cf222e;
  --color-alert-text:   #a40e26;
}

/* ── Catppuccin Latte ── */
[data-theme="catppuccin-latte"] {
  --color-bg:           #eff1f5;
  --color-surface:      #ffffff;
  --color-border:       #bcc0cc;
  --color-divide:       #dce0e8;
  --color-text:         #4c4f69;
  --color-text-muted:   #5c5f77;
  --color-text-subtle:  #7c7f93;
  --color-nav-bg:       #8839ef;
  --color-nav-link:     #eff1f5;
  --color-nav-pill-bg:  #ffffff;
  --color-nav-pill-fg:  #8839ef;
  --color-accent:       #1e66f5;
  --color-accent-hover: #04a5e5;
  --color-accent-light: #dce0ff;
  --color-accent-text:  #1e66f5;
  --color-notice-bg:    #e4f6df;
  --color-notice-border:#40a02b;
  --color-notice-text:  #2f7d20;
  --color-alert-bg:     #fce7e8;
  --color-alert-border: #d20f39;
  --color-alert-text:   #b20c30;
}

/* ── One Light ── */
[data-theme="one-light"] {
  --color-bg:           #fafafa;
  --color-surface:      #ffffff;
  --color-border:       #d5d5d5;
  --color-divide:       #e5e5e6;
  --color-text:         #383a42;
  --color-text-muted:   #5c6370;
  --color-text-subtle:  #7f848e;
  --color-nav-bg:       #4078f2;
  --color-nav-link:     #f9fbff;
  --color-nav-pill-bg:  #ffffff;
  --color-nav-pill-fg:  #4078f2;
  --color-accent:       #4078f2;
  --color-accent-hover: #2f5fc1;
  --color-accent-light: #e6edff;
  --color-accent-text:  #2f5fc1;
  --color-notice-bg:    #e8f5e9;
  --color-notice-border:#50a14f;
  --color-notice-text:  #3f873f;
  --color-alert-bg:     #fde8e7;
  --color-alert-border: #e45649;
  --color-alert-text:   #c43e32;
}

/* ── Nord ── */
[data-theme="nord"] {
  --color-bg:           #2e3440;   /* nord0 */
  --color-surface:      #3b4252;   /* nord1 */
  --color-border:       #4c566a;   /* nord3 */
  --color-divide:       #434c5e;   /* nord2 */
  --color-text:         #eceff4;   /* nord6 */
  --color-text-muted:   #d8dee9;   /* nord4 */
  --color-text-subtle:  #81a1c1;   /* nord9 */
  --color-nav-bg:       #3b4252;   /* nord1 */
  --color-nav-link:     #88c0d0;   /* nord8 */
  --color-nav-pill-bg:  #88c0d0;   /* nord8 */
  --color-nav-pill-fg:  #2e3440;   /* nord0 */
  --color-accent:       #88c0d0;   /* nord8 */
  --color-accent-hover: #81a1c1;   /* nord9 */
  --color-accent-light: #3b4252;   /* nord1 */
  --color-accent-text:  #8fbcbb;   /* nord7 */
  --color-notice-bg:    #3b4252;
  --color-notice-border:#a3be8c;   /* nord14 */
  --color-notice-text:  #a3be8c;
  --color-alert-bg:     #3b4252;
  --color-alert-border: #bf616a;   /* nord11 */
  --color-alert-text:   #bf616a;
}

/* ── Gruvbox Dark ── */
[data-theme="gruvbox-dark"] {
  --color-bg:           #282828;   /* bg0 */
  --color-surface:      #3c3836;   /* bg1 */
  --color-border:       #665c54;   /* bg3 */
  --color-divide:       #504945;   /* bg2 */
  --color-text:         #ebdbb2;   /* fg */
  --color-text-muted:   #bdae93;   /* fg2 */
  --color-text-subtle:  #928374;   /* gray */
  --color-nav-bg:       #3c3836;   /* bg1 */
  --color-nav-link:     #fabd2f;   /* yellow */
  --color-nav-pill-bg:  #fabd2f;
  --color-nav-pill-fg:  #282828;
  --color-accent:       #fabd2f;   /* yellow */
  --color-accent-hover: #d79921;   /* yellow dim */
  --color-accent-light: #3c3836;   /* bg1 */
  --color-accent-text:  #fe8019;   /* orange bright */
  --color-notice-bg:    #3c3836;
  --color-notice-border:#b8bb26;   /* green */
  --color-notice-text:  #b8bb26;
  --color-alert-bg:     #3c3836;
  --color-alert-border: #fb4934;   /* red bright */
  --color-alert-text:   #fb4934;
}

/* ── Gruvbox Light ── */
[data-theme="gruvbox-light"] {
  --color-bg:           #fbf1c7;   /* light bg0 */
  --color-surface:      #f9f5d7;   /* light bg0 hard */
  --color-border:       #d5c4a1;   /* light bg2 */
  --color-divide:       #ebdbb2;   /* light bg1 */
  --color-text:         #3c3836;   /* dark fg */
  --color-text-muted:   #504945;   /* dark fg1 */
  --color-text-subtle:  #7c6f64;   /* gray */
  --color-nav-bg:       #79740e;   /* yellow dim */
  --color-nav-link:     #fbf1c7;
  --color-nav-pill-bg:  #f9f5d7;
  --color-nav-pill-fg:  #79740e;
  --color-accent:       #b57614;   /* yellow */
  --color-accent-hover: #af3a03;   /* orange */
  --color-accent-light: #ebdbb2;
  --color-accent-text:  #af3a03;
  --color-notice-bg:    #f2e5bc;
  --color-notice-border:#79740e;   /* green dim */
  --color-notice-text:  #79740e;
  --color-alert-bg:     #f4d9c6;
  --color-alert-border: #cc241d;   /* red */
  --color-alert-text:   #9d0006;   /* red dim */
}

/* ── Monokai ── */
[data-theme="monokai"] {
  --color-bg:           #272822;
  --color-surface:      #3e3d32;
  --color-border:       #75715e;
  --color-divide:       #49483e;
  --color-text:         #f8f8f2;
  --color-text-muted:   #cfcfc2;
  --color-text-subtle:  #a59f85;
  --color-nav-bg:       #3e3d32;
  --color-nav-link:     #a6e22e;
  --color-nav-pill-bg:  #a6e22e;
  --color-nav-pill-fg:  #272822;
  --color-accent:       #a6e22e;
  --color-accent-hover: #8ccf1e;
  --color-accent-light: #3e3d32;
  --color-accent-text:  #66d9ef;
  --color-notice-bg:    #3e3d32;
  --color-notice-border:#a6e22e;
  --color-notice-text:  #a6e22e;
  --color-alert-bg:     #3e3d32;
  --color-alert-border: #f92672;
  --color-alert-text:   #f92672;
}

/* ── Tango Light ── */
[data-theme="tango-light"] {
  --color-bg:           #eeeeec;   /* aluminium1 */
  --color-surface:      #ffffff;
  --color-border:       #babdb6;   /* aluminium3 */
  --color-divide:       #d3d7cf;   /* aluminium2 */
  --color-text:         #2e3436;   /* aluminium6 */
  --color-text-muted:   #555753;   /* aluminium5 */
  --color-text-subtle:  #888a85;   /* aluminium4 */
  --color-nav-bg:       #3465a4;   /* sky blue3 */
  --color-nav-link:     #d3d7cf;   /* aluminium2 */
  --color-nav-pill-bg:  #ffffff;
  --color-nav-pill-fg:  #3465a4;
  --color-accent:       #3465a4;   /* sky blue3 */
  --color-accent-hover: #204a87;   /* sky blue4 */
  --color-accent-light: #d8e4f2;
  --color-accent-text:  #204a87;   /* sky blue4 */
  --color-notice-bg:    #edf7df;
  --color-notice-border:#73d216;   /* chameleon2 */
  --color-notice-text:  #4e9a06;   /* chameleon3 */
  --color-alert-bg:     #fde4df;
  --color-alert-border: #ef2929;   /* scarlet red2 */
  --color-alert-text:   #a40000;   /* scarlet red3 */
}

/* ── Tango Dark ── */
[data-theme="tango-dark"] {
  --color-bg:           #2e3436;   /* aluminium6 */
  --color-surface:      #555753;   /* aluminium5 */
  --color-border:       #888a85;   /* aluminium4 */
  --color-divide:       #3f4446;
  --color-text:         #eeeeec;   /* aluminium1 */
  --color-text-muted:   #d3d7cf;   /* aluminium2 */
  --color-text-subtle:  #babdb6;   /* aluminium3 */
  --color-nav-bg:       #204a87;   /* sky blue4 */
  --color-nav-link:     #729fcf;   /* sky blue2 */
  --color-nav-pill-bg:  #fce94f;   /* butter1 */
  --color-nav-pill-fg:  #2e3436;
  --color-accent:       #729fcf;   /* sky blue2 */
  --color-accent-hover: #3465a4;   /* sky blue3 */
  --color-accent-light: #3f4446;
  --color-accent-text:  #fce94f;   /* butter1 */
  --color-notice-bg:    #3f4446;
  --color-notice-border:#8ae234;   /* chameleon1 */
  --color-notice-text:  #8ae234;
  --color-alert-bg:     #3f4446;
  --color-alert-border: #ef2929;   /* scarlet red2 */
  --color-alert-text:   #ef2929;
}

/* ── Theme utility classes ── */
.theme-bg           { background-color: var(--color-bg); }
.theme-surface      { background-color: var(--color-surface); }
.theme-border       { border-color: var(--color-border); }
.theme-divide > * + * { border-top-color: var(--color-divide); }
.theme-text         { color: var(--color-text); }
.theme-text-muted   { color: var(--color-text-muted); }
.theme-text-subtle  { color: var(--color-text-subtle); }
.theme-nav          { background-color: var(--color-nav-bg); }
.theme-nav-link     { color: var(--color-nav-link); }
.theme-accent-btn {
  background-color: var(--color-accent);
  color: #ffffff;
}
.theme-accent-btn:hover { background-color: var(--color-accent-hover); }
.theme-accent-text  { color: var(--color-accent-text); }
.theme-accent-light { background-color: var(--color-accent-light); }

/* Radio card: checked state driven by CSS variable */
.preference-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-radio-card {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.preference-radio:checked + .theme-radio-card,
.theme-radio-card.checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent-light);
  color: var(--color-accent-text);
}

.preference-radio:focus-visible + .theme-radio-card {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Form inputs */
.theme-input {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.theme-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent);
  border-color: var(--color-accent);
}