/* ============================================================
   EditoHub — prebuilt theme palettes (owner picks in Studio settings).
   Each palette overrides ONLY the color tokens from app.css :root —
   layout, radii, fonts, motion stay identical, so every option is
   designer-consistent. Default (no data-eht attr) = Emerald Sand.
   ============================================================ */

/* ---- Ocean Blue ---- */
:root[data-eht="ocean"]{
  --glass-d:rgba(16,60,97,.46);
  --side-glow:rgba(59,130,246,.20); --side-1:#0E2F4F; --side-2:#0A2440; --side-3:#07192E;
  --nav-on-a:rgba(59,130,246,.28); --nav-on-b:rgba(59,130,246,.07); --nav-on-ring:rgba(125,180,247,.32); --nav-on-glow:rgba(59,130,246,.8);
  --sand:#F7FAFD; --sand-2:#EDF3F9;
  --cyprus:#155081; --cyprus-d:#103C61; --cyprus-dd:#0C2F4D; --cyprus-l:#1E6EA8;
  --emerald:#2166D1; --mint:#3B82F6; --mint-2:#7DB4F7; --sky:#C9E2FB;
  --ink:#0C2233; --muted-l:#4E6377; --muted-d:#A5C0D6;
  --line-l:rgba(12,47,77,.10);
  --grad-accent:linear-gradient(125deg,#2166D1 0%,#3B82F6 50%,#7DB4F7 100%);
  --grad-deep:linear-gradient(135deg,#103C61 0%,#155081 55%,#1E6EA8 100%);
}

/* ---- Royal Violet ---- */
:root[data-eht="violet"]{
  --glass-d:rgba(58,39,102,.46);
  --side-glow:rgba(139,92,246,.20); --side-1:#2C2050; --side-2:#231944; --side-3:#181031;
  --nav-on-a:rgba(139,92,246,.28); --nav-on-b:rgba(139,92,246,.07); --nav-on-ring:rgba(182,154,248,.32); --nav-on-glow:rgba(139,92,246,.8);
  --sand:#FAF8FD; --sand-2:#F2EDF8;
  --cyprus:#4C3384; --cyprus-d:#3A2766; --cyprus-dd:#2D1E50; --cyprus-l:#6647A8;
  --emerald:#7C3AED; --mint:#8B5CF6; --mint-2:#B69AF8; --sky:#E4D9FB;
  --ink:#261A44; --muted-l:#5D5470; --muted-d:#BBAED6;
  --line-l:rgba(45,30,80,.10);
  --grad-accent:linear-gradient(125deg,#7C3AED 0%,#8B5CF6 50%,#B69AF8 100%);
  --grad-deep:linear-gradient(135deg,#3A2766 0%,#4C3384 55%,#6647A8 100%);
}

/* ---- Crimson Studio ---- */
:root[data-eht="crimson"]{
  --glass-d:rgba(94,27,48,.46);
  --side-glow:rgba(244,63,94,.18); --side-1:#43141F; --side-2:#360F19; --side-3:#270A12;
  --nav-on-a:rgba(244,63,94,.26); --nav-on-b:rgba(244,63,94,.07); --nav-on-ring:rgba(251,140,160,.32); --nav-on-glow:rgba(244,63,94,.75);
  --sand:#FDF8F7; --sand-2:#F8EEEC;
  --cyprus:#7C2440; --cyprus-d:#5E1B30; --cyprus-dd:#481425; --cyprus-l:#A03254;
  --emerald:#E11D48; --mint:#F43F5E; --mint-2:#FB8CA0; --sky:#FCDDE3;
  --ink:#3A1220; --muted-l:#6E5259; --muted-d:#D6AEB6;
  --line-l:rgba(72,20,37,.10);
  --gold:#D9A441; --gold-2:#EDD293;
  --grad-accent:linear-gradient(125deg,#E11D48 0%,#F43F5E 50%,#FB8CA0 100%);
  --grad-deep:linear-gradient(135deg,#5E1B30 0%,#7C2440 55%,#A03254 100%);
}

/* ---- Graphite Gold ---- */
:root[data-eht="graphite"]{
  --glass-d:rgba(27,32,29,.46);
  --side-glow:rgba(200,162,75,.18); --side-1:#1C211E; --side-2:#151917; --side-3:#0F1312;
  --nav-on-a:rgba(200,162,75,.26); --nav-on-b:rgba(200,162,75,.07); --nav-on-ring:rgba(226,199,132,.32); --nav-on-glow:rgba(200,162,75,.7);
  --sand:#F7F6F3; --sand-2:#EFECE5;
  --cyprus:#242A27; --cyprus-d:#1B201D; --cyprus-dd:#141816; --cyprus-l:#39423E;
  --emerald:#B98A2F; --mint:#C8A24B; --mint-2:#E2C784; --sky:#F0E3C2;
  --ink:#191D1B; --muted-l:#5A615D; --muted-d:#BDB49E;
  --line-l:rgba(20,24,22,.10);
  --grad-accent:linear-gradient(125deg,#B98A2F 0%,#C8A24B 50%,#E2C784 100%);
  --grad-deep:linear-gradient(135deg,#1B201D 0%,#242A27 55%,#39423E 100%);
}

/* ---- Sunset Coral ---- */
:root[data-eht="sunset"]{
  --glass-d:rgba(109,47,20,.46);
  --side-glow:rgba(249,115,22,.18); --side-1:#47220F; --side-2:#38190B; --side-3:#291106;
  --nav-on-a:rgba(249,115,22,.26); --nav-on-b:rgba(249,115,22,.07); --nav-on-ring:rgba(251,160,92,.32); --nav-on-glow:rgba(249,115,22,.75);
  --sand:#FDF9F4; --sand-2:#F8F0E6;
  --cyprus:#8A3E1D; --cyprus-d:#6D2F14; --cyprus-dd:#54240F; --cyprus-l:#B25526;
  --emerald:#EA580C; --mint:#F97316; --mint-2:#FBA05C; --sky:#FCE1CC;
  --ink:#3D1F10; --muted-l:#6F5A4C; --muted-d:#DEBBA4;
  --line-l:rgba(84,36,15,.10);
  --grad-accent:linear-gradient(125deg,#EA580C 0%,#F97316 50%,#FBA05C 100%);
  --grad-deep:linear-gradient(135deg,#6D2F14 0%,#8A3E1D 55%,#B25526 100%);
}

/* ---- smooth cross-fade while switching themes (class added briefly by theme.js) ---- */
.eh-theming, .eh-theming *, .eh-theming *::before, .eh-theming *::after{
  transition:background-color .5s ease,background .5s ease,color .35s ease,border-color .5s ease,box-shadow .5s ease,fill .35s ease,stroke .35s ease !important}



/* ---- ambient theme glow behind media: footage feels part of the palette ---- */
.cine,.phone{box-shadow:0 34px 90px -24px color-mix(in srgb, var(--mint) 45%, transparent),0 10px 34px -14px color-mix(in srgb, var(--emerald) 30%, transparent)!important}
.reel{box-shadow:0 22px 54px -20px color-mix(in srgb, var(--mint) 42%, transparent)!important}