/* ============================================================
   Panelside color themes and border styles
   Each theme sets color tokens plus a "frame" style for cards,
   buttons and dialogs. Switch with <html data-theme="...">.
   ============================================================ */

/* Shared frame hooks (the default theme keeps today's look) */
:root{ --frame:var(--line); --frame-hi:var(--green); --hot:#E07A4F; --cold:#5AA9E6; --grain:none }
.pkg,.sec-card,.group,.pay-opt,.free,.dlg,.app-bar,.tag span,.store-pill,.pay-row b,.wb,.check-card,.res-card,.term,.reviews{
  border-width:var(--bw); border-style:var(--bstyle); border-color:var(--frame);
  border-radius:var(--r-card); box-shadow:var(--card-shadow)
}
.free{border-color:rgba(var(--accent-rgb),.45)}
.tag span,.pay-row b,.store-pill{border-radius:min(var(--r-card),8px)}
.btn,.nav-cta,.store-pill{border-radius:var(--r-btn)}
.sec-card{position:relative}
.sec-ic,.po-ic,.ab-ic{border-radius:min(var(--r-card),12px)}

/* Corner brackets, like registration marks on a drawing */
[data-tick] .pkg::after,[data-tick] .sec-card::after,[data-tick] .group::after,[data-tick] .dlg::after,[data-tick] .free::after{
  content:"";position:absolute;inset:6px;pointer-events:none;z-index:3;
  --c:var(--tick-color,var(--green)); --l:14px; --t:var(--tick-w,2px);
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--t),
    linear-gradient(var(--c),var(--c)) top left/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--t),
    linear-gradient(var(--c),var(--c)) top right/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--t),
    linear-gradient(var(--c),var(--c)) bottom left/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--t),
    linear-gradient(var(--c),var(--c)) bottom right/var(--t) var(--l);
  background-repeat:no-repeat
}
[data-tick] .free{position:relative}
[data-tick] .dlg{position:relative}

/* Paper grain for print-style themes */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;background-image:var(--grain);opacity:var(--grain-o,0);mix-blend-mode:multiply}

/* ---------- 1. Control Room (default): navy + signal green, hairlines ---------- */

/* ---------- 2. Blueprint: cobalt drawing sheet, dashed lines, square corners ---------- */
[data-theme="blueprint"]{
  --bg:#0C3A6B; --bg-2:#0F4680; --bg-3:#0B3462; --surface:#0E4176; --glow:#1B5DA3; --navy:#16508F;
  --bg-rgb:12,58,107; --surface-rgb:14,65,118; --fg-rgb:236,244,255; --accent-rgb:255,212,71;
  --ink:#F4F8FF; --ink-2:#D3E3F6; --muted:#AFC6E2; --green:#FFD447; --green-d:#C9A21F; --accent-hi:#FFE27E; --on-accent:#0B2747; --warn:#FFD447;
  --line:rgba(214,232,255,.30); --frame:rgba(214,232,255,.55);
  --r-card:0; --r-btn:2px; --bw:1px; --bstyle:dashed;
  --tick-color:#EAF3FF; --tick-w:1.5px;
  --hot:#FF9E7A; --cold:#9FDBFF;
}
[data-theme="blueprint"] body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(214,232,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(214,232,255,.07) 1px,transparent 1px),
    linear-gradient(rgba(214,232,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(214,232,255,.035) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px
}
[data-theme="blueprint"] .packages,[data-theme="blueprint"] .security,[data-theme="blueprint"] .app{background:transparent}
[data-theme="blueprint"] .stage{background:radial-gradient(120% 80% at 50% 35%,rgba(40,110,190,.55) 0%,rgba(12,58,107,0) 62%)}
[data-theme="blueprint"] h1,[data-theme="blueprint"] h2{font-weight:700}

/* ---------- 3. Spec Sheet: warm paper, ink rules, hard offset shadows ---------- */
[data-theme="spec"]{
  --bg:#F2EEE5; --bg-2:#FBF8F2; --bg-3:#EAE4D7; --surface:#FBF8F2; --glow:#FFFFFF; --navy:#D9D1C1;
  --bg-rgb:242,238,229; --surface-rgb:251,248,242; --fg-rgb:22,19,15; --accent-rgb:194,65,12;
  --ink:#16130F; --ink-2:#3B352D; --muted:#5F574C; --green:#C2410C; --green-d:#9A3412; --accent-hi:#D9500F; --on-accent:#FFFFFF; --warn:#8A4B00;
  --line:rgba(22,19,15,.16); --frame:#16130F;
  --r-card:6px; --r-btn:6px; --bw:2px; --bstyle:solid; --card-shadow:5px 5px 0 #16130F;
  --hot:#C2410C; --cold:#1D5FA8;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-o:.18;
}
[data-theme="spec"] .btn-primary,[data-theme="spec"] button.btn.btn-primary{box-shadow:3px 3px 0 #16130F;border:2px solid #16130F}
[data-theme="spec"] .btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #16130F}
[data-theme="spec"] .btn-ghost,[data-theme="spec"] button.btn.btn-ghost{border:2px solid #16130F}
[data-theme="spec"] .nav.solid,[data-theme="spec"] .nav{border-bottom-color:#16130F}
[data-theme="spec"] .phone{box-shadow:0 0 0 1.5px #16130F,8px 8px 0 rgba(22,19,15,.85)}
[data-theme="spec"] .qr{box-shadow:4px 4px 0 #16130F;border:2px solid #16130F}
[data-theme="spec"] .dlg::backdrop{background:rgba(22,19,15,.45)}
[data-theme="spec"] .pkg:hover{box-shadow:8px 8px 0 #16130F}

/* ---------- 4. Meter: charcoal + safety yellow, corner brackets ---------- */
[data-theme="meter"]{
  --bg:#121211; --bg-2:#1B1B19; --bg-3:#161614; --surface:#1E1E1B; --glow:#2B2A24; --navy:#2B2A24;
  --bg-rgb:18,18,17; --surface-rgb:30,30,27; --fg-rgb:245,243,236; --accent-rgb:255,198,41;
  --ink:#F5F3EC; --ink-2:#D9D6CB; --muted:#A6A398; --green:#FFC629; --green-d:#C99A12; --accent-hi:#FFD75E; --on-accent:#121211; --warn:#FFC629;
  --line:rgba(245,243,236,.12); --frame:rgba(245,243,236,.16);
  --r-card:3px; --r-btn:3px; --bw:1px; --bstyle:solid;
  --tick-color:#FFC629; --tick-w:2px;
  --hot:#FF7A45; --cold:#5FB6FF;
}
[data-theme="meter"] .pkg-flag{background:repeating-linear-gradient(-45deg,#FFC629 0 10px,#121211 10px 14px);color:#121211;text-shadow:0 0 6px #FFC629,0 0 2px #FFC629}
[data-theme="meter"] .eyebrow::before{content:"// ";opacity:.6}

/* ---------- 5. Copper: warm black, copper wire, double rules ---------- */
[data-theme="copper"]{
  --bg:#17110D; --bg-2:#21180F; --bg-3:#1B140E; --surface:#231A11; --glow:#3B2716; --navy:#3B2716;
  --bg-rgb:23,17,13; --surface-rgb:35,26,17; --fg-rgb:244,233,220; --accent-rgb:224,146,90;
  --ink:#F4E9DC; --ink-2:#E2D0BA; --muted:#B59E85; --green:#E0925A; --green-d:#B06A35; --accent-hi:#ECA676; --on-accent:#1A0F07; --warn:#F0C27B;
  --line:rgba(244,233,220,.13); --frame:rgba(224,146,90,.42);
  --r-card:14px; --r-btn:999px; --bw:3px; --bstyle:double;
  --hot:#E0925A; --cold:#8FC1C9;
}
[data-theme="copper"] h1,[data-theme="copper"] h2{letter-spacing:-.03em}
[data-theme="copper"] .stage{background:radial-gradient(120% 80% at 50% 35%,#3B2716 0%,#17110D 62%)}
[data-theme="copper"] .phone{background:linear-gradient(145deg,#6B4526,#2A1C11 30%,#1C130C 70%,#8A5A32);box-shadow:0 0 0 1.5px rgba(240,169,112,.35),0 30px 60px rgba(0,0,0,.55)}

/* ---------- Theme picker ---------- */
.theme-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(var(--fg-rgb),.04);cursor:pointer;color:var(--ink);padding:0}
.theme-btn svg{width:20px;height:20px}
.theme-pop{position:fixed;top:64px;right:max(12px,var(--gutter));z-index:120;width:min(320px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border:var(--bw) var(--bstyle) var(--frame);border-radius:var(--r-card);box-shadow:var(--card-shadow),0 24px 60px rgba(0,0,0,.35);padding:14px;display:none}
.theme-pop.on{display:block}
.theme-pop h4{font-family:var(--f-mono);font-size:var(--t-caption);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);margin:2px 4px 10px;font-weight:500}
.theme-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 10px;border-radius:min(var(--r-card),10px);border:1px solid transparent;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.theme-opt:hover{background:rgba(var(--fg-rgb),.05)}
.theme-opt[aria-pressed="true"]{border-color:var(--green)}
.theme-opt b{display:block;font-weight:700;font-size:15px}
.theme-opt small{display:block;color:var(--muted);font-size:12.5px;line-height:1.3}
.sw{width:40px;height:40px;flex:none;border-radius:8px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.sw i{position:absolute;right:5px;bottom:5px;width:14px;height:14px;border-radius:50%}
.pkg.pkg-feature{border-color:rgba(var(--accent-rgb),.6)}
[data-theme="spec"] .pkg.pkg-feature{border-color:var(--green)}
.po-bank::before{background:var(--green);-webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='%2346C08A' stroke-width='2'%3E%3Cpath d='M2 8l10-6 10 6M4 8v10M9 8v10M15 8v10M20 8v10M2 20h20'/%3E%3C/svg%3E");mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='%2346C08A' stroke-width='2'%3E%3Cpath d='M2 8l10-6 10 6M4 8v10M9 8v10M15 8v10M20 8v10M2 20h20'/%3E%3C/svg%3E")}
.ab-ic{position:relative;background:var(--bg)}
.ab-ic::after{content:"";position:absolute;inset:0;background:var(--green);-webkit-mask:no-repeat center/70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%2346C08A' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='6' y='3.5' width='20' height='25' rx='3'/%3E%3Cpath d='M12 3.5v25'/%3E%3C/g%3E%3Ccircle cx='19.5' cy='16' r='2.6' fill='%2346C08A'/%3E%3C/svg%3E");mask:no-repeat center/70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%2346C08A' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='6' y='3.5' width='20' height='25' rx='3'/%3E%3Cpath d='M12 3.5v25'/%3E%3C/g%3E%3Ccircle cx='19.5' cy='16' r='2.6' fill='%2346C08A'/%3E%3C/svg%3E")}
[data-theme="spec"] .pay-row b,[data-theme="spec"] .tag span,[data-theme="spec"] .store-pill{box-shadow:2px 2px 0 #16130F;border-width:1.5px}
[data-theme="spec"] .pay-opt{box-shadow:3px 3px 0 #16130F}

/* Copper hero: faint mechanical line drawing behind the 3D building (screen-blended so only the lines show). */
[data-theme="copper"] .stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("./assets/hero-lines-tall.webp") center bottom/cover no-repeat;opacity:calc(.4*var(--lines,1));mix-blend-mode:screen;-webkit-mask-image:linear-gradient(180deg,transparent 34%,#000 82%);mask-image:linear-gradient(180deg,transparent 34%,#000 82%)}
@media (min-aspect-ratio:1/1){
  [data-theme="copper"] .stage::before{background-image:url("./assets/hero-lines-wide.webp");background-position:center;opacity:calc(.55*var(--lines,1));-webkit-mask-image:radial-gradient(60% 70% at 50% 45%,transparent 30%,#000 100%);mask-image:radial-gradient(60% 70% at 50% 45%,transparent 30%,#000 100%)}
}