/*
 * Color Scheme Design Tokens
 * 26 curated color schemes for web and application development
 * Usage: add data-theme="<scheme-slug>" on html/body or scope class .theme-<scheme-slug>
 *
 * Source: https://archondev.io/color-schemes
 * License: Free to use in any project
 */

/* ── ArchonDev Brand (default for this site) ── */
:root[data-theme="archondev"],
.theme-archondev {
  --theme-name: "archondev";
  --color-background: #DACCC4;
  --color-surface: #EBE3DE;
  --color-text: #0c0b09;
  --color-primary: #374F4E;
  --color-secondary: #AA8552;
  --color-accent: #D1801E;
  --color-muted: #7a7673;
  --color-on-primary: #DACCC4;
  --color-on-secondary: #DACCC4;
  --color-on-accent: #DACCC4;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

/* ── Dark Themes ── */

:root[data-theme="claude-code"],
.theme-claude-code {
  --theme-name: "claude-code";
  --color-background: #0A0F1A;
  --color-surface: #111827;
  --color-text: #E2E8F0;
  --color-primary: #6366F1;
  --color-secondary: #1E293B;
  --color-accent: #10B981;
  --color-muted: #1E293B;
  --color-on-primary: #E2E8F0;
  --color-on-secondary: #E2E8F0;
  --color-on-accent: #0A0F1A;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="midnight"],
.theme-midnight {
  --theme-name: "midnight";
  --color-background: #0D1117;
  --color-surface: #161B22;
  --color-text: #E6EDF3;
  --color-primary: #3B82F6;
  --color-secondary: #1D3461;
  --color-accent: #7C3AED;
  --color-muted: #30363D;
  --color-on-primary: #E6EDF3;
  --color-on-secondary: #E6EDF3;
  --color-on-accent: #E6EDF3;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="neon"],
.theme-neon {
  --theme-name: "neon";
  --color-background: #0A0A0F;
  --color-surface: #13131A;
  --color-text: #F0F0FF;
  --color-primary: #00F5C4;
  --color-secondary: #1A1A2E;
  --color-accent: #FF2D78;
  --color-muted: #2A2A3E;
  --color-on-primary: #0A0A0F;
  --color-on-secondary: #F0F0FF;
  --color-on-accent: #F0F0FF;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="sfmb"],
.theme-sfmb {
  --theme-name: "sfmb";
  --color-background: #352838;
  --color-surface: #45354C;
  --color-text: #F8EC26;
  --color-primary: #F8EC26;
  --color-secondary: #957770;
  --color-accent: #9A8D90;
  --color-muted: #60555E;
  --color-on-primary: #352838;
  --color-on-secondary: #352838;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

/* ── Light Themes ── */

:root[data-theme="06-dark-and-dramatic-jpg"],
.theme-06-dark-and-dramatic-jpg {
  --theme-name: "06-dark-and-dramatic-jpg";
  --color-background: #FEFEFE;
  --color-surface: #FEFEFE;
  --color-text: #235860;
  --color-primary: #B39758;
  --color-secondary: #97A09F;
  --color-on-primary: #FEFEFE;
  --color-on-secondary: #FEFEFE;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted, var(--color-surface, var(--color-text)));
}

:root[data-theme="8-colors-v1"],
.theme-8-colors-v1 {
  --theme-name: "8-colors-v1";
  --color-background: #E7E8E5;
  --color-surface: #A5A6A6;
  --color-text: #161A1A;
  --color-primary: #103463;
  --color-secondary: #A11B1B;
  --color-accent: #AE571E;
  --color-on-primary: #E7E8E5;
  --color-on-secondary: #E7E8E5;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted, var(--color-surface, var(--color-text)));
}

:root[data-theme="8-colors-v2"],
.theme-8-colors-v2 {
  --theme-name: "8-colors-v2";
  --color-background: #EFF3F3;
  --color-surface: #9AA4A6;
  --color-text: #111C18;
  --color-primary: #E9FA21;
  --color-secondary: #E96D0F;
  --color-accent: #1B5960;
  --color-on-primary: #111C18;
  --color-on-secondary: #EFF3F3;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted, var(--color-surface, var(--color-text)));
}

:root[data-theme="amber"],
.theme-amber {
  --theme-name: "amber";
  --color-background: #FCFCFC;
  --color-surface: #A5CBD2;
  --color-text: #1B1B1B;
  --color-primary: #E2480D;
  --color-secondary: #621A07;
  --color-accent: #25778D;
  --color-muted: #9BA2A5;
  --color-on-primary: #FCFCFC;
  --color-on-secondary: #FCFCFC;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="autum"],
.theme-autum {
  --theme-name: "autum";
  --color-background: #F6F5F7;
  --color-surface: #A9A8AC;
  --color-text: #312B26;
  --color-primary: #C1833E;
  --color-secondary: #807264;
  --color-accent: #6C6761;
  --color-on-primary: #F6F5F7;
  --color-on-secondary: #F6F5F7;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted, var(--color-surface, var(--color-text)));
}

:root[data-theme="born"],
.theme-born {
  --theme-name: "born";
  --color-background: #F4F7F8;
  --color-text: #324F5A;
  --color-primary: #3587AD;
  --color-secondary: #95C2DE;
  --color-accent: #2F7090;
  --color-muted: #5A6C66;
  --color-on-primary: #F4F7F8;
  --color-on-secondary: #324F5A;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="calcite"],
.theme-calcite {
  --theme-name: "calcite";
  --color-background: #F2F1F1;
  --color-text: #242120;
  --color-primary: #FB7A40;
  --color-secondary: #ECBD9B;
  --color-accent: #3C4043;
  --color-muted: #5F5C5A;
  --color-on-primary: #F2F1F1;
  --color-on-secondary: #242120;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="clockwork"],
.theme-clockwork {
  --theme-name: "clockwork";
  --color-background: #F2F2F1;
  --color-text: #1F1F1E;
  --color-primary: #F8A25A;
  --color-secondary: #E66415;
  --color-accent: #929598;
  --color-on-primary: #F2F2F1;
  --color-on-secondary: #F2F2F1;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted, var(--color-surface, var(--color-text)));
}

:root[data-theme="copper"],
.theme-copper {
  --theme-name: "copper";
  --color-background: #FBF7F4;
  --color-surface: #F0E8E0;
  --color-text: #2C1A0E;
  --color-primary: #B5622A;
  --color-secondary: #E8C4A0;
  --color-accent: #9B4F35;
  --color-muted: #C4A882;
  --color-on-primary: #FBF7F4;
  --color-on-secondary: #2C1A0E;
  --color-on-accent: #FBF7F4;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="flat"],
.theme-flat {
  --theme-name: "flat";
  --color-background: #F8FAFC;
  --color-surface: #A8C8E7;
  --color-text: #01887A;
  --color-primary: #FB5454;
  --color-secondary: #FDCBBA;
  --color-accent: #76A4F4;
  --color-muted: #A7A6A6;
  --color-on-primary: #F8FAFC;
  --color-on-secondary: #01887A;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="forest"],
.theme-forest {
  --theme-name: "forest";
  --color-background: #F5F2ED;
  --color-surface: #E6E0D4;
  --color-text: #1C2B1E;
  --color-primary: #3A6B47;
  --color-secondary: #8DB89A;
  --color-accent: #C8A96E;
  --color-muted: #A8B5A2;
  --color-on-primary: #F5F2ED;
  --color-on-secondary: #1C2B1E;
  --color-on-accent: #1C2B1E;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="koons"],
.theme-koons {
  --theme-name: "koons";
  --color-background: #DFE2E4;
  --color-surface: #A7A9A6;
  --color-text: #252D34;
  --color-primary: #25495A;
  --color-secondary: #2B3945;
  --color-accent: #637A84;
  --color-on-primary: #DFE2E4;
  --color-on-secondary: #DFE2E4;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted, var(--color-surface, var(--color-text)));
}

:root[data-theme="lemon"],
.theme-lemon {
  --theme-name: "lemon";
  --color-background: #FCFCFC;
  --color-surface: #B8BEC3;
  --color-text: #1C1D1C;
  --color-primary: #F1E30A;
  --color-secondary: #2D4B5E;
  --color-accent: #6D8394;
  --color-muted: #595E60;
  --color-on-primary: #1C1D1C;
  --color-on-secondary: #FCFCFC;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="lively"],
.theme-lively {
  --theme-name: "lively";
  --color-background: #F1EEE7;
  --color-surface: #C3B8B4;
  --color-text: #02656C;
  --color-primary: #F9E692;
  --color-secondary: #9DEBD5;
  --color-accent: #2B9A9D;
  --color-muted: #AFA5A0;
  --color-on-primary: #02656C;
  --color-on-secondary: #02656C;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="lusion"],
.theme-lusion {
  --theme-name: "lusion";
  --color-background: #EFF0FA;
  --color-surface: #A9AAB1;
  --color-text: #0B104D;
  --color-primary: #0B22C2;
  --color-secondary: #0F1EA4;
  --color-accent: #16181F;
  --color-muted: #5D5E66;
  --color-on-primary: #EFF0FA;
  --color-on-secondary: #EFF0FA;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="marina"],
.theme-marina {
  --theme-name: "marina";
  --color-background: #FDF8F5;
  --color-text: #306181;
  --color-primary: #B4D1E5;
  --color-secondary: #7E5231;
  --color-on-primary: #306181;
  --color-on-secondary: #FDF8F5;
  --color-on-accent: #306181;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted, var(--color-surface, var(--color-text)));
}

:root[data-theme="nordic"],
.theme-nordic {
  --theme-name: "nordic";
  --color-background: #FAFBFC;
  --color-surface: #EEF0F2;
  --color-text: #1A1E23;
  --color-primary: #2563EB;
  --color-secondary: #CBD5E1;
  --color-muted: #94A3B8;
  --color-on-primary: #FAFBFC;
  --color-on-secondary: #1A1E23;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="sakura"],
.theme-sakura {
  --theme-name: "sakura";
  --color-background: #FDF6F0;
  --color-surface: #FAE8E8;
  --color-text: #3D2B2B;
  --color-primary: #D4748A;
  --color-secondary: #C9B8D8;
  --color-accent: #E8A87C;
  --color-muted: #CABCBC;
  --color-on-primary: #FDF6F0;
  --color-on-secondary: #3D2B2B;
  --color-on-accent: #3D2B2B;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="saphire-ash"],
.theme-saphire-ash {
  --theme-name: "saphire-ash";
  --color-background: #FAFAFA;
  --color-text: #1B1B1B;
  --color-primary: #E6ABAB;
  --color-secondary: #34637A;
  --color-accent: #B36159;
  --color-muted: #8E9A98;
  --color-on-primary: #FAFAFA;
  --color-on-secondary: #FAFAFA;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="terrazzo"],
.theme-terrazzo {
  --theme-name: "terrazzo";
  --color-background: #F4F0EE;
  --color-text: #1F1C1A;
  --color-primary: #D17E1D;
  --color-secondary: #ECBC96;
  --color-accent: #E9C9AC;
  --color-muted: #374F4B;
  --color-on-primary: #F4F0EE;
  --color-on-secondary: #1F1C1A;
  --color-on-accent: #1F1C1A;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

:root[data-theme="watson"],
.theme-watson {
  --theme-name: "watson";
  --color-background: #E4F6E9;
  --color-text: #122D30;
  --color-primary: #26515A;
  --color-secondary: #A0CCCB;
  --color-accent: #8BBBB9;
  --color-muted: #5D5A4E;
  --color-on-primary: #E4F6E9;
  --color-on-secondary: #122D30;
  --color-on-accent: #122D30;
  --color-link: var(--color-primary);
  --color-border: var(--color-muted);
}

/* ── Semantic aliases ── */
:root, [data-theme], [class^="theme-"] {
  --app-bg: var(--color-background);
  --app-surface: var(--color-surface, var(--color-background));
  --app-text: var(--color-text);
  --app-primary: var(--color-primary);
  --app-secondary: var(--color-secondary, var(--color-primary));
  --app-accent: var(--color-accent, var(--color-primary));
  --app-muted: var(--color-muted, var(--color-surface, var(--color-text)));
  --app-on-primary: var(--color-on-primary, var(--color-background));
  --app-on-secondary: var(--color-on-secondary, var(--color-background));
  --app-on-accent: var(--color-on-accent, var(--color-background));
}