/* EconoDia — shared page foundation (fonts, resets, shared keyframes).
   Visual language lives inline in each page, ported 1:1 from the approved Claude Design pages. */

@font-face{font-family:"General Sans";src:url("fonts/GeneralSans-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"General Sans";src:url("fonts/GeneralSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url("fonts/GeneralSans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url("fonts/GeneralSans-Semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"General Sans";src:url("fonts/GeneralSans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Shabnam";src:url("fonts/Shabnam-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Shabnam";src:url("fonts/Shabnam.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Shabnam";src:url("fonts/Shabnam-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Shabnam";src:url("fonts/Shabnam-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

body{margin:0;background:#F7F5EE;color:#12233C;font-family:Shabnam,system-ui,sans-serif}
input,button,select,textarea{font-family:inherit}
button{cursor:pointer}
html{scroll-behavior:smooth}
a{color:#163A69}a:hover{color:#5A7FA8}
.gs{font-family:"General Sans",Shabnam,sans-serif}

@keyframes edPulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes edTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes edMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes edRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes edFloat{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-12px) rotate(var(--rot,0deg))}}

/* ===== theme tokens =====
   Light mode intentionally leaves vars unset — each page's inline var(--x, fallback)
   carries the light value (same convention as index.html). Dark defines the full set. */
:root{--acc:#ABB59F}
html[data-theme="dark"]{
  --bg:#0C1524;--sur:#132139;--ink:#EEF2EF;--mut:#9AA9BE;
  --lin:rgba(255,255,255,.13);--linSoft:rgba(255,255,255,.09);
  --tintN:#182740;--tintS:#28311F;--chip:rgba(255,255,255,.06);
  --pC:#C2CDB2;--gain:#8FBF9B;--loss:#E8938A;--up:#7BD3A3;--down:#E8938A;
  --ico:#DCE4D2;--dLogo:inline;--lLogo:none
}
html[data-theme="dark"] body{background:#0C1524;color:#EEF2EF}
/* low-specificity so any class-styled link (buttons, chips) keeps its own colors */
:where(html[data-theme="dark"]) a{color:#9FB6D2}
:where(html[data-theme="dark"]) a:hover{color:#C9D8E8}

/* ===== theme switch (moon/stars ⇆ sun/cloud) — internal coords stay LTR ===== */
.ed-switch{font-size:10px;position:relative;display:inline-block;width:4em;height:2.2em;border-radius:30px;flex:none;direction:ltr;vertical-align:middle}
.ed-switch input{opacity:0;width:0;height:0;position:absolute}
.ed-switch .slider{position:absolute;cursor:pointer;inset:0;background:#101F38;border:1px solid var(--lin,#E6E3D6);transition:.4s;border-radius:30px;overflow:hidden}
.ed-switch .slider:before{position:absolute;content:"";height:1.2em;width:1.2em;border-radius:20px;left:.5em;bottom:.42em;transition:.4s;transition-timing-function:cubic-bezier(.81,-.04,.38,1.5);box-shadow:inset 8px -4px 0 0 #F6F1E3}
.ed-switch input:checked + .slider{background:#5A7FA8}
.ed-switch input:checked + .slider:before{transform:translateX(1.8em);box-shadow:inset 15px -4px 0 15px #F2C94C}
.ed-switch .star{background:#fff;border-radius:50%;position:absolute;width:3.5px;height:3.5px;transition:all .4s}
.ed-switch .star1{left:2.5em;top:.55em}
.ed-switch .star2{left:2.2em;top:1.2em}
.ed-switch .star3{left:3em;top:.9em}
.ed-switch input:checked ~ .slider .star{opacity:0}
.ed-switch .cloud{width:3.5em;position:absolute;bottom:-1.4em;left:-1.1em;opacity:0;transition:all .4s}
.ed-switch input:checked ~ .slider .cloud{opacity:1}
.ed-switch input:focus-visible + .slider{outline:2px solid var(--acc,#ABB59F);outline-offset:2px}

/* ===== hand-drawn emphasis (use sparingly) ===== */
.hl-mark{background-image:linear-gradient(120deg,rgba(171,181,159,.52),rgba(171,181,159,.30));background-repeat:no-repeat;background-size:0% 82%;background-position:100% 60%;border-radius:.4em .6em .35em .55em;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .1em;transition:background-size .9s cubic-bezier(.25,1,.3,1) .15s}
.hl-mark.in-view{background-size:100% 82%}
html[data-theme="dark"] .hl-mark{background-image:linear-gradient(120deg,rgba(171,181,159,.30),rgba(171,181,159,.18))}
.hl-under{position:relative}
.hl-under::after{content:"";position:absolute;left:0;right:0;bottom:-.22em;height:.34em;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 5 Q5 1 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%23ABB59F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom/auto 100%;transform:scaleX(0);transform-origin:100% 50%;transition:transform .8s cubic-bezier(.25,1,.3,1) .1s}
.hl-under.in-view::after{transform:scaleX(1)}

/* ===== reveal on scroll (armed only when theme.js is alive — no-JS keeps content visible) ===== */
html.ed-motion [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--rd,0s)}
html.ed-motion [data-reveal="fade"]{transform:none}
html.ed-motion [data-reveal="start"]{transform:translateX(24px)}
html.ed-motion [data-reveal].in-view{opacity:1;transform:none}

/* ===== progressive blur (reading edges) ===== */
.pblur{position:absolute;left:0;right:0;height:110px;pointer-events:none;z-index:6;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.pblur-top{top:0;background:linear-gradient(to top,transparent,var(--bg,#F7F5EE));-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent)}
.pblur-bottom{bottom:0;background:linear-gradient(to bottom,transparent,var(--bg,#F7F5EE));-webkit-mask-image:linear-gradient(to top,#000 40%,transparent);mask-image:linear-gradient(to top,#000 40%,transparent)}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .hl-mark{background-size:100% 82%;transition:none}
  .hl-under::after{transform:scaleX(1);transition:none}
  .ed-switch .slider,.ed-switch .slider:before,.ed-switch .star,.ed-switch .cloud{transition:none}
  html{scroll-behavior:auto}
}

/* ===== floating collapse nav (armed by theme.js: .ed-navfixed on .navwrap) =====
   Mirrors the framer-motion pattern: pill floats fixed at top, collapses to a
   circle on scroll-down past 150px, re-expands on 80px of scroll-up or click. */
.ed-navfixed.ed-navfixed{position:fixed!important;top:16px;left:0;right:0;z-index:90;padding:0!important;pointer-events:none;animation:edNavIn .6s cubic-bezier(.22,1,.36,1)}
@keyframes edNavIn{from{opacity:0;transform:translateY(-80px)}to{opacity:1;transform:none}}
.ed-navfixed .navpill{pointer-events:auto;position:relative;flex-wrap:nowrap;box-sizing:border-box;height:48px;max-width:min(1060px,calc(100vw - 24px));overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:max-width .55s cubic-bezier(.34,1.25,.64,1),padding .55s cubic-bezier(.34,1.25,.64,1),transform .25s cubic-bezier(.34,1.56,.64,1)}
.ed-navfixed .navlinks{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
.ed-navfixed .navlinks::-webkit-scrollbar{display:none}
/* staggered children (theme.js stamps --i per direct child) */
.ed-navfixed .navpill>*{transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1);transition-delay:calc(.18s + var(--i,0)*.06s)}
.ed-nav-collapsed .navpill{max-width:48px;padding:0!important;cursor:pointer}
.ed-nav-collapsed .navpill>*{opacity:0;transform:translateX(18px) scale(.95);pointer-events:none;transition-delay:calc((4 - var(--i,0))*.04s)}
.ed-nav-collapsed .navpill:hover{transform:scale(1.1)}
.ed-nav-collapsed .navpill:active{transform:scale(.95)}
/* burger shown in collapsed circle */
.ed-navburger{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.7);pointer-events:none;color:var(--ink,#12233C);transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.ed-nav-collapsed .ed-navburger{opacity:1;transform:scale(1);transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  .ed-navfixed{animation:none}
  .ed-navfixed .navpill,.ed-navfixed .navpill>*,.ed-navburger{transition:none!important}
}