/* ==============================================
   COLOR SCHEMES — font4social.com
   
   Architecture:
   - Default (no data-scheme) = original site colors
   - data-scheme="neon"         = Neon Arcade
   - data-scheme="sketch"       = Sketch Pad
   - data-scheme="mono"         = Mono + One Splash
   - data-scheme="highlighter"  = Highlighter Duo
   - data-scheme="craft"        = Construction Paper
   
   Each scheme overrides BOTH dark and light vars.
   The dark/light toggle (body.light-theme) still works independently.
   ============================================== */


/* ──────────────────────────────────────────────
   NEON ARCADE — Ink black + electric cyan + magenta
   ────────────────────────────────────────────── */

/* Neon: Dark */
[data-scheme="neon"] {
  --page-bg: #0a0e1a;
  --surface: #111832;
  --paper: #141b32;
  --input-field: #0e1325;
  --sky-bg: #111832;
  --text: #e8f0ff;
  --muted: rgba(232, 240, 255, .55);
  --hint: rgba(232, 240, 255, .30);
  --cloud-paint: #1a2244;
  --cloud-alpha: .25;
  --stars-visible: .90;
  --stroke: #000;
  --heading-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
  --accent: #00e5ff;
  --accent-hover: #00c4dd;
  --accent-2: #ff3cac;
  --brand-color: #00e5ff;
  --brand-glow: 0 0 15px rgba(0, 229, 255, .30);
  --logo-accent: #ff3cac;
  --yellow-pink: #00e5ff;
  --contrast-color: #fff;
  --menu-hover: #00e5ff;
  --success: #c8ff3c;
  --warning: #ffaa33;
  --error: #ff3cac;
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, .50), 0 18px 32px rgba(0, 0, 0, .40);
  --shadow-soft: 0 14px 38px rgba(0, 0, 0, .35);
  --toast-bg: #00e5ff;
  --toast-text: #001a1f;
  --footer-bg: #111832;
  --footer-text: #e8f0ff;
  --footer-link: rgba(232, 240, 255, .55);
  --footer-link-hover: #00e5ff;
  --footer-border: rgba(0, 229, 255, .08);
  --footer-heading: #00e5ff;
  --footer-logo-color: #e8f0ff;
  --footer-bottom-bg: rgba(0, 0, 0, .25);
  --footer-bottom-text: rgba(232, 240, 255, .38);
  --pat-opacity: .05;
}

/* Neon: Light */
[data-scheme="neon"].light-theme,
.light-theme[data-scheme="neon"] {
  --page-bg: #eef4ff;
  --surface: #dce6f8;
  --paper: #eaf0ff;
  --input-field: #ffffff;
  --sky-bg: #3ba8ff;
  --text: #0a0e1a;
  --muted: rgba(10, 14, 26, .55);
  --hint: rgba(10, 14, 26, .30);
  --cloud-paint: #ffffff;
  --cloud-alpha: .70;
  --stars-visible: 0;
  --stroke: #000;
  --heading-shadow: none;
  --accent: #0077cc;
  --accent-hover: #005fa3;
  --accent-2: #cc2288;
  --brand-color: #0077cc;
  --brand-glow: none;
  --logo-accent: #cc2288;
  --yellow-pink: #cc2288;
  --contrast-color: #000;
  --menu-hover: #0077cc;
  --success: #2a8830;
  --warning: #aa7700;
  --error: #cc2255;
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, .10), 0 18px 32px rgba(0, 0, 0, .08);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, .08);
  --toast-bg: #0077cc;
  --toast-text: #fff;
  --footer-bg: #dce6f8;
  --footer-text: #0a0e1a;
  --footer-link: rgba(10, 14, 26, .55);
  --footer-link-hover: #0077cc;
  --footer-border: rgba(0, 0, 0, .08);
  --footer-heading: #0a0e1a;
  --footer-bottom-bg: rgba(0, 0, 0, .04);
  --footer-bottom-text: rgba(10, 14, 26, .42);
  --pat-opacity: .04;
}


/* ──────────────────────────────────────────────
   SKETCH PAD — Black & white + one red marker
   ────────────────────────────────────────────── */

/* Sketch: Dark */
[data-scheme="sketch"] {
  --page-bg: #111111;
  --surface: #1a1a1a;
  --paper: #222222;
  --input-field: #0a0a0a;
  --sky-bg: #1a1a1a;
  --text: #eeeeee;
  --muted: rgba(238, 238, 238, .55);
  --hint: rgba(238, 238, 238, .30);
  --cloud-paint: #444;
  --cloud-alpha: .20;
  --stars-visible: 0;
  --stroke: #000;
  --heading-shadow: -2px -2px 0 #444, 2px -2px 0 #444, -2px 2px 0 #444, 2px 2px 0 #444;
  --accent: #ff3c3c;
  --accent-hover: #e02020;
  --accent-2: #ff3c3c;
  --brand-color: #ffffff;
  --brand-glow: none;
  --logo-accent: #ff3c3c;
  --yellow-pink: #ff3c3c;
  --contrast-color: #fff;
  --menu-hover: #ff3c3c;
  --success: #aaaaaa;
  --warning: #888888;
  --error: #ff3c3c;
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, .5), 0 18px 32px rgba(0, 0, 0, .4);
  --shadow-soft: 0 14px 38px rgba(0, 0, 0, .35);
  --toast-bg: #333;
  --toast-text: #eee;
  --footer-bg: #1a1a1a;
  --footer-text: #eee;
  --footer-link: rgba(238, 238, 238, .55);
  --footer-link-hover: #ff3c3c;
  --footer-border: rgba(255, 255, 255, .08);
  --footer-heading: #fff;
  --footer-logo-color: #fff;
  --footer-bottom-bg: rgba(0, 0, 0, .25);
  --footer-bottom-text: rgba(238, 238, 238, .40);
  --pat-opacity: .03;
}

/* Sketch: Light */
[data-scheme="sketch"].light-theme,
.light-theme[data-scheme="sketch"] {
  --page-bg: #fafafa;
  --surface: #f0f0f0;
  --paper: #f5f5f5;
  --input-field: #ffffff;
  --sky-bg: #e8e8e8;
  --text: #111111;
  --muted: rgba(17, 17, 17, .50);
  --hint: rgba(17, 17, 17, .28);
  --cloud-paint: #ffffff;
  --cloud-alpha: .55;
  --stars-visible: 0;
  --stroke: #222;
  --heading-shadow: none;
  --accent: #cc2222;
  --accent-hover: #aa1a1a;
  --accent-2: #cc2222;
  --brand-color: #222222;
  --brand-glow: none;
  --logo-accent: #cc2222;
  --yellow-pink: #cc2222;
  --contrast-color: #000;
  --menu-hover: #cc2222;
  --success: #666;
  --warning: #888;
  --error: #cc2222;
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, .12), 0 18px 32px rgba(0, 0, 0, .10);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, .10);
  --toast-bg: #333;
  --toast-text: #fff;
  --footer-bg: #f0f0f0;
  --footer-text: #222;
  --footer-link: rgba(17, 17, 17, .50);
  --footer-link-hover: #cc2222;
  --footer-border: rgba(0, 0, 0, .10);
  --footer-heading: #222;
  --footer-bottom-bg: rgba(0, 0, 0, .04);
  --footer-bottom-text: rgba(17, 17, 17, .45);
  --pat-opacity: .04;
}


/* ──────────────────────────────────────────────
   MONO + ONE SPLASH — Graphite + electric blue
   ────────────────────────────────────────────── */

/* Mono: Dark */
[data-scheme="mono"] {
  --page-bg: #13161c;
  --surface: #1c2028;
  --paper: #242830;
  --input-field: #0e1117;
  --sky-bg: #1c2028;
  --text: #d8dce8;
  --muted: rgba(216, 220, 232, .50);
  --hint: rgba(216, 220, 232, .28);
  --cloud-paint: #3a4050;
  --cloud-alpha: .22;
  --stars-visible: .50;
  --stroke: #000;
  --heading-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
  --accent: #2d7aff;
  --accent-hover: #1a62e0;
  --accent-2: #2d7aff;
  --brand-color: #ffffff;
  --brand-glow: 0 0 12px rgba(45, 122, 255, .25);
  --logo-accent: #2d7aff;
  --yellow-pink: #2d7aff;
  --contrast-color: #fff;
  --menu-hover: #2d7aff;
  --success: #4a9a6a;
  --warning: #c8a040;
  --error: #d84040;
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, .40), 0 18px 32px rgba(0, 0, 0, .30);
  --shadow-soft: 0 14px 38px rgba(0, 0, 0, .28);
  --toast-bg: #2d7aff;
  --toast-text: #fff;
  --footer-bg: #1c2028;
  --footer-text: #d8dce8;
  --footer-link: rgba(216, 220, 232, .50);
  --footer-link-hover: #2d7aff;
  --footer-border: rgba(255, 255, 255, .06);
  --footer-heading: #fff;
  --footer-logo-color: #d8dce8;
  --footer-bottom-bg: rgba(0, 0, 0, .20);
  --footer-bottom-text: rgba(216, 220, 232, .38);
  --pat-opacity: .04;
}

/* Mono: Light */
[data-scheme="mono"].light-theme,
.light-theme[data-scheme="mono"] {
  --page-bg: #f0f2f5;
  --surface: #e4e7ec;
  --paper: #edf0f4;
  --input-field: #ffffff;
  --sky-bg: #c8d4e8;
  --text: #13161c;
  --muted: rgba(19, 22, 28, .50);
  --hint: rgba(19, 22, 28, .28);
  --cloud-paint: #ffffff;
  --cloud-alpha: .65;
  --stars-visible: 0;
  --stroke: #222;
  --heading-shadow: none;
  --accent: #1a5ed4;
  --accent-hover: #134aaa;
  --accent-2: #1a5ed4;
  --brand-color: #1a2030;
  --brand-glow: none;
  --logo-accent: #1a5ed4;
  --yellow-pink: #1a5ed4;
  --contrast-color: #000;
  --menu-hover: #1a5ed4;
  --success: #2a7a4a;
  --warning: #a08020;
  --error: #c03030;
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, .10), 0 18px 32px rgba(0, 0, 0, .08);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, .08);
  --toast-bg: #1a5ed4;
  --toast-text: #fff;
  --footer-bg: #e4e7ec;
  --footer-text: #13161c;
  --footer-link: rgba(19, 22, 28, .50);
  --footer-link-hover: #1a5ed4;
  --footer-border: rgba(0, 0, 0, .08);
  --footer-heading: #13161c;
  --footer-bottom-bg: rgba(0, 0, 0, .03);
  --footer-bottom-text: rgba(19, 22, 28, .42);
  --pat-opacity: .03;
}


/* ──────────────────────────────────────────────
   HIGHLIGHTER DUO — Black notebook + yellow & pink markers
   ────────────────────────────────────────────── */

/* Highlighter: Dark */
[data-scheme="highlighter"] {
  --page-bg: #111111;
  --surface: #1a1a1a;
  --paper: #222222;
  --input-field: #080808;
  --sky-bg: #1a1a1a;
  --text: #eeeeee;
  --muted: rgba(238, 238, 238, .55);
  --hint: rgba(238, 238, 238, .30);
  --cloud-paint: #444;
  --cloud-alpha: .18;
  --stars-visible: .30;
  --stroke: #000;
  --heading-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
  --accent: #ffe63b;
  --accent-hover: #e6cc00;
  --accent-2: #ff4da6;
  --brand-color: #ffe63b;
  --brand-glow: 0 0 12px rgba(255, 230, 59, .25);
  --logo-accent: #ff4da6;
  --yellow-pink: #ffe63b;
  --contrast-color: #fff;
  --menu-hover: #ffe63b;
  --success: #ffe63b;
  --warning: #ffe63b;
  --error: #ff4da6;
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, .50), 0 18px 32px rgba(0, 0, 0, .40);
  --shadow-soft: 0 14px 38px rgba(0, 0, 0, .35);
  --toast-bg: #ffe63b;
  --toast-text: #000;
  --footer-bg: #1a1a1a;
  --footer-text: #eee;
  --footer-link: rgba(238, 238, 238, .50);
  --footer-link-hover: #ff4da6;
  --footer-border: rgba(255, 255, 255, .06);
  --footer-heading: #ffe63b;
  --footer-logo-color: #ffe63b;
  --footer-bottom-bg: rgba(0, 0, 0, .25);
  --footer-bottom-text: rgba(238, 238, 238, .38);
  --pat-opacity: .03;
}

/* Highlighter: Light */
[data-scheme="highlighter"].light-theme,
.light-theme[data-scheme="highlighter"] {
  --page-bg: #ffffff;
  --surface: #f6f6f6;
  --paper: #fafafa;
  --input-field: #ffffff;
  --sky-bg: #e8e8e8;
  --text: #111111;
  --muted: rgba(17, 17, 17, .48);
  --hint: rgba(17, 17, 17, .25);
  --cloud-paint: #ffffff;
  --cloud-alpha: .50;
  --stars-visible: 0;
  --stroke: #222;
  --heading-shadow: none;
  --accent: #cc0077;
  --accent-hover: #aa0060;
  --accent-2: #cc0077;
  --brand-color: #222222;
  --brand-glow: none;
  --logo-accent: #cc0077;
  --yellow-pink: #cc0077;
  --contrast-color: #000;
  --menu-hover: #cc0077;
  --success: #444;
  --warning: #666;
  --error: #cc0077;
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, .10), 0 18px 32px rgba(0, 0, 0, .08);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, .08);
  --toast-bg: #222;
  --toast-text: #fff;
  --footer-bg: #f6f6f6;
  --footer-text: #222;
  --footer-link: rgba(17, 17, 17, .48);
  --footer-link-hover: #cc0077;
  --footer-border: rgba(0, 0, 0, .08);
  --footer-heading: #222;
  --footer-bottom-bg: rgba(0, 0, 0, .03);
  --footer-bottom-text: rgba(17, 17, 17, .40);
  --pat-opacity: .03;
}


/* ──────────────────────────────────────────────
   CONSTRUCTION PAPER — Kraft + marker stickers
   ────────────────────────────────────────────── */

/* Craft: Dark */
[data-scheme="craft"] {
  --page-bg: #2a2520;
  --surface: #352e28;
  --paper: #3e362f;
  --input-field: #4a4038;
  --sky-bg: #352e28;
  --text: #f0e8d8;
  --muted: rgba(240, 232, 216, .60);
  --hint: rgba(240, 232, 216, .35);
  --cloud-paint: #5a5048;
  --cloud-alpha: .25;
  --stars-visible: .70;
  --stroke: #000;
  --heading-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
  --accent: #ffcc33;
  --accent-hover: #e6b800;
  --accent-2: #ff6644;
  --brand-color: #ffcc33;
  --brand-glow: 0 0 12px rgba(255, 204, 51, .35);
  --logo-accent: #ff6644;
  --yellow-pink: #ffcc33;
  --contrast-color: #fff;
  --menu-hover: #ffcc33;
  --success: #44bb77;
  --warning: #ffaa33;
  --error: #ff4444;
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, .40), 0 18px 32px rgba(0, 0, 0, .30);
  --shadow-soft: 0 14px 38px rgba(0, 0, 0, .25);
  --toast-bg: #44bb77;
  --toast-text: #0a2818;
  --footer-bg: #352e28;
  --footer-text: #f0e8d8;
  --footer-link: rgba(240, 232, 216, .60);
  --footer-link-hover: #ffcc33;
  --footer-border: rgba(255, 255, 255, .08);
  --footer-heading: #ffcc33;
  --footer-logo-color: #f0e8d8;
  --footer-bottom-bg: rgba(0, 0, 0, .18);
  --footer-bottom-text: rgba(240, 232, 216, .45);
  --pat-opacity: .08;
}

/* Craft: Light */
[data-scheme="craft"].light-theme,
.light-theme[data-scheme="craft"] {
  --page-bg: #f0e0c0;
  --surface: #e8d8b8;
  --paper: #faf4e8;
  --input-field: #fffdf8;
  --sky-bg: #d4c4a0;
  --text: #2a2018;
  --muted: rgba(42, 32, 24, .58);
  --hint: rgba(42, 32, 24, .32);
  --cloud-paint: #faf4e8;
  --cloud-alpha: .55;
  --stars-visible: 0;
  --stroke: #000;
  --heading-shadow: none;
  --accent: #cc4400;
  --accent-hover: #aa3800;
  --accent-2: #3366aa;
  --brand-color: #cc4400;
  --brand-glow: none;
  --logo-accent: #ff6644;
  --yellow-pink: #ff6644;
  --contrast-color: #000;
  --menu-hover: #cc4400;
  --success: #2a8855;
  --warning: #cc8800;
  --error: #cc3333;
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, .15), 0 18px 32px rgba(0, 0, 0, .12);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, .12);
  --toast-bg: #2a8855;
  --toast-text: #f0fff0;
  --footer-bg: #e8d8b8;
  --footer-text: #2a2018;
  --footer-link: rgba(42, 32, 24, .58);
  --footer-link-hover: #cc4400;
  --footer-border: rgba(0, 0, 0, .12);
  --footer-heading: #2a2018;
  --footer-bottom-bg: rgba(0, 0, 0, .05);
  --footer-bottom-text: rgba(42, 32, 24, .45);
  --pat-opacity: .06;
}


/* ──────────────────────────────────────────────
   F4S-BLOCK & GENERATOR overrides per scheme
   (These cascade from the root vars above)
   ────────────────────────────────────────────── */

[data-scheme] .f4s-block,
[data-scheme] .generator-wrapper {
  --f4s-text: var(--text);
  --f4s-muted: var(--muted);
  --f4s-bg-card: var(--paper);
  --f4s-bg-ui: var(--surface);
  --f4s-brand: var(--brand-color);
  --f4s-cyan: var(--accent);
  --f4s-ok: var(--success);
  --f4s-warn: var(--error);
  --g-bg: var(--input-field);
  --g-surface: var(--surface);
  --g-surface2: var(--paper);
  --g-text: var(--text);
  --g-muted: var(--accent);
  --g-brand: var(--brand-color);
  --g-cyan: var(--accent);
  --g-ok: var(--success);
  --g-warn: var(--warning);
}


/* ──────────────────────────────────────────────
   SCHEME PICKER UI
   ────────────────────────────────────────────── */

.scheme-picker {
  display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px;
    border-radius: 16px 0px 0px 16px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 2px solid rgba(0, 0, 0, .15);
    backdrop-filter: blur(8px);
    flex-direction: column;
    position: fixed;
    right: 0px;
    top:60%;
}

body:not(.light-theme) .scheme-picker {
  border-color: rgba(255, 255, 255, .10);
}

.scheme-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #000;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.68, -.55, .265, 1.55), box-shadow .15s;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .20);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.scheme-dot:hover {
  transform: scale(1.18) translateY(-1px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .22);
}

.scheme-dot:active {
  transform: scale(.95) translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .20);
}

.scheme-dot.active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 0 rgba(0, 0, 0, .20);
}

/* Dot colors — each shows the scheme's signature */
.scheme-dot[data-scheme="default"] {
  background: linear-gradient(135deg, #1a1a2e 50%, #ffd43b 50%);
}
.scheme-dot[data-scheme="neon"] {
  background: linear-gradient(135deg, #0a0e1a 50%, #00e5ff 50%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .20), inset 0 0 0 1px #ff3cac;
}
.scheme-dot[data-scheme="sketch"] {
  background: linear-gradient(135deg, #111 50%, #fafafa 50%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .20), inset 0 0 0 1px #ff3c3c;
}
.scheme-dot[data-scheme="mono"] {
  background: linear-gradient(135deg, #13161c 50%, #f0f2f5 50%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .20), inset 0 0 0 1px #2d7aff;
}
.scheme-dot[data-scheme="highlighter"] {
  background: linear-gradient(135deg, #ffe63b 50%, #ff4da6 50%);
}
.scheme-dot[data-scheme="craft"] {
  background: linear-gradient(135deg, #2a2520 50%, #f0e0c0 50%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .20), inset 0 0 0 1px #ffcc33;
}

@media (max-width: 600px) {
  .scheme-dot {
    width: 20px;
    height: 20px;
  }
  .scheme-picker {
    gap: 5px;
    padding: 5px;
  }
}