/* =====================================================================
   Guatermelon themes
   ---------------------------------------------------------------------
   A theme is ONLY a block of tokens on html[data-theme="..."]. Every
   component in site.css / admin.css reads these tokens and nothing else,
   so adding a theme means copying one block, renaming it, and adding it
   to the registry in assets/js/themes.js (label, fonts, swatch).
   ===================================================================== */

:root,
html[data-theme="noir"] {
  /* palette */
  --bg: #07090b;
  --bg-2: #0c1013;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.075);
  --surface-solid: #11161a;
  --text: #f3f5f2;
  --text-2: #b9c2bd;
  --muted: #7d8a84;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --accent: #ff3e6c;          /* melon flesh */
  --accent-2: #3ddc97;        /* rind */
  --accent-3: #ffd166;        /* sunshine */
  --accent-ink: #0b0b0b;      /* text on accent */
  --grad: linear-gradient(120deg, #ff3e6c 0%, #ff8a5b 45%, #3ddc97 100%);
  --glow: 0 0 0 1px rgba(255, 62, 108, .25), 0 20px 60px -20px rgba(255, 62, 108, .45);

  /* type */
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.035em;
  --display-transform: none;
  --display-scale: 1;

  /* shape */
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --border-width: 1px;
  --card-bg: var(--surface);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -30px rgba(0, 0, 0, .6);
  --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 80px -30px rgba(0, 0, 0, .8);
  --blur: 18px;

  /* atmosphere */
  --blob-opacity: .55;
  --grain-opacity: .07;
  --grid-opacity: .5;
  --spotlight: rgba(255, 62, 108, .10);
  --scanlines: 0;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- sorbet */
html[data-theme="sorbet"] {
  --bg: #fff7f0;
  --bg-2: #ffeee4;
  --surface: rgba(255, 255, 255, .72);
  --surface-2: #ffffff;
  --surface-solid: #ffffff;
  --text: #2b1a22;
  --text-2: #5d4651;
  --muted: #9a8790;
  --border: rgba(80, 30, 50, .10);
  --border-strong: rgba(80, 30, 50, .22);
  --accent: #ff5c8a;
  --accent-2: #2fbf8a;
  --accent-3: #ffb347;
  --accent-ink: #ffffff;
  --grad: linear-gradient(120deg, #ff5c8a 0%, #ffa36b 50%, #2fbf8a 100%);
  --glow: 0 20px 50px -20px rgba(255, 92, 138, .45);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --radius: 24px;
  --radius-lg: 36px;
  --card-shadow: 0 2px 0 rgba(255, 255, 255, .8) inset, 0 24px 50px -28px rgba(160, 60, 90, .35);
  --card-shadow-hover: 0 2px 0 rgba(255, 255, 255, .8) inset, 0 34px 70px -28px rgba(160, 60, 90, .5);
  --blob-opacity: .7;
  --grain-opacity: .05;
  --grid-opacity: 0;
  --spotlight: rgba(255, 92, 138, .10);
  color-scheme: light;
}

/* ---------------------------------------------------------------- brutal */
html[data-theme="brutal"] {
  --bg: #f2efe6;
  --bg-2: #e8e3d5;
  --surface: #ffffff;
  --surface-2: #fffdf6;
  --surface-solid: #ffffff;
  --text: #0a0a0a;
  --text-2: #262626;
  --muted: #5c5c5c;
  --border: #0a0a0a;
  --border-strong: #0a0a0a;
  --accent: #ff3b5c;
  --accent-2: #00c27a;
  --accent-3: #ffd400;
  --accent-ink: #0a0a0a;
  --grad: linear-gradient(90deg, #ff3b5c, #ff3b5c);
  --glow: 6px 6px 0 #0a0a0a;
  --font-display: "Archivo Black", Impact, sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", sans-serif;
  --font-mono: "Space Mono", Consolas, monospace;
  --display-weight: 400;
  --display-tracking: -0.02em;
  --display-transform: uppercase;
  --display-scale: .92;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --border-width: 3px;
  --card-bg: #ffffff;
  --card-shadow: 6px 6px 0 #0a0a0a;
  --card-shadow-hover: 10px 10px 0 #0a0a0a;
  --blur: 0px;
  --blob-opacity: 0;
  --grain-opacity: .06;
  --grid-opacity: .9;
  --spotlight: transparent;
  color-scheme: light;
}

/* ---------------------------------------------------------------- terminal */
html[data-theme="terminal"] {
  --bg: #030503;
  --bg-2: #060a06;
  --surface: rgba(57, 255, 20, .035);
  --surface-2: rgba(57, 255, 20, .07);
  --surface-solid: #070c07;
  --text: #c8ffb8;
  --text-2: #8fdc7a;
  --muted: #4f8a45;
  --border: rgba(57, 255, 20, .22);
  --border-strong: rgba(57, 255, 20, .5);
  --accent: #39ff14;
  --accent-2: #00e5ff;
  --accent-3: #ffe600;
  --accent-ink: #001a00;
  --grad: linear-gradient(90deg, #39ff14, #00e5ff);
  --glow: 0 0 0 1px rgba(57, 255, 20, .5), 0 0 30px rgba(57, 255, 20, .25);
  --font-display: "JetBrains Mono", Consolas, monospace;
  --font-body: "JetBrains Mono", Consolas, monospace;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.04em;
  --display-scale: .9;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 4px;
  --card-shadow: none;
  --card-shadow-hover: 0 0 30px rgba(57, 255, 20, .18);
  --blur: 0px;
  --blob-opacity: .18;
  --grain-opacity: .05;
  --grid-opacity: .35;
  --spotlight: rgba(57, 255, 20, .07);
  --scanlines: 1;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- synth */
html[data-theme="synth"] {
  --bg: #0e0120;
  --bg-2: #170331;
  --surface: rgba(255, 255, 255, .05);
  --surface-2: rgba(255, 255, 255, .09);
  --surface-solid: #1b0838;
  --text: #fdf0ff;
  --text-2: #d9b8ef;
  --muted: #9a77b8;
  --border: rgba(255, 110, 230, .2);
  --border-strong: rgba(255, 110, 230, .45);
  --accent: #ff2bd6;
  --accent-2: #00f0ff;
  --accent-3: #ffcf3f;
  --accent-ink: #12001f;
  --grad: linear-gradient(120deg, #ff2bd6 0%, #ff8a3d 50%, #ffcf3f 100%);
  --glow: 0 0 0 1px rgba(255, 43, 214, .4), 0 0 50px -10px rgba(255, 43, 214, .55);
  --font-display: "Syne", "Segoe UI", sans-serif;
  --font-body: "Outfit", "Segoe UI", sans-serif;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --display-transform: uppercase;
  --display-scale: .8;
  --radius: 14px;
  --radius-lg: 22px;
  --card-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
  --card-shadow-hover: 0 0 0 1px rgba(0, 240, 255, .35), 0 30px 70px -25px rgba(255, 43, 214, .5);
  --blob-opacity: .65;
  --grain-opacity: .06;
  --grid-opacity: .8;
  --spotlight: rgba(0, 240, 255, .10);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- editorial */
html[data-theme="editorial"] {
  --bg: #fbfaf7;
  --bg-2: #f3f1ea;
  --surface: #ffffff;
  --surface-2: #f7f5ef;
  --surface-solid: #ffffff;
  --text: #121212;
  --text-2: #3d3d3d;
  --muted: #858178;
  --border: rgba(0, 0, 0, .10);
  --border-strong: rgba(0, 0, 0, .3);
  --accent: #e5322d;
  --accent-2: #1d7a52;
  --accent-3: #c9a227;
  --accent-ink: #ffffff;
  --grad: linear-gradient(90deg, #121212, #121212);
  --glow: 0 1px 0 rgba(0, 0, 0, .06);
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.02em;
  --display-scale: 1.15;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --card-shadow: none;
  --card-shadow-hover: 0 20px 40px -24px rgba(0, 0, 0, .25);
  --blur: 0px;
  --blob-opacity: 0;
  --grain-opacity: .035;
  --grid-opacity: 0;
  --spotlight: transparent;
  color-scheme: light;
}