/* ============================================================
   OHSUN — DESIGN TOKENS  (palette · themes · reset · type)
   ------------------------------------------------------------
   Two suns, two themes:
     EARTH  → the sun that shines on the earth  (night / dark)
     SKY    → the sun that shines in the sky    (day  / light)
   Brand:  Sea Sky Blue #00B9E7 · Earth Grey #565454 · White · Black
   The accent blue is constant; everything else flips per theme.
   ============================================================ */

:root{
  /* --- constants (theme-independent) --- */
  --blue:#00B9E7;
  --blue-bright:#3fd0f5;
  --blue-600:#00a6d4;
  --blue-700:#0089b4;
  --grey:#565454;            /* Earth Grey */
  --on-blue:#001318;         /* text/icons that sit on a blue fill */

  --f-display:'Sora',system-ui,-apple-system,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:'Space Mono',ui-monospace,SFMono-Regular,monospace;

  --maxw:1280px;
  --gut:clamp(20px,4vw,28px);
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- EARTH : night / dark (default fallback) ---- */
html[data-theme="earth"]{
  --bg:#0B0D0F;
  --bg-1:#070809;            /* deeper bands (footer / cta / marquee) */
  --panel:#14181C;
  --panel-2:#1B2026;
  --panel-3:#222932;         /* raised */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --grid-line:rgba(255,255,255,.07);
  --tx:#EDF1F4;
  --tx-mute:#8B939A;
  --tx-dim:#5C6472;

  /* inverted panel — a light surface on the dark page */
  --inv-bg:#F2F4F6;
  --inv-panel:#FFFFFF;
  --inv-tx:#0D1014;
  --inv-mute:#565454;
  --inv-dim:#8A919C;
  --inv-line:rgba(11,13,15,.10);

  --glow:0 0 48px rgba(0,185,231,.30);
  --glow-soft:0 0 90px rgba(0,185,231,.16);
  --shadow-card:0 24px 60px -26px rgba(0,185,231,.50);
  --hero-lit-shadow:0 0 40px rgba(0,185,231,.55);
  --beam:.16;                /* hero beam opacity multiplier */
  --nav-scrim:82%;
}

/* ---- SKY : day / light ---- */
html[data-theme="sky"]{
  --bg:#F2F4F6;
  --bg-1:#E7EBEE;
  --panel:#FFFFFF;
  --panel-2:#EDF0F3;
  --panel-3:#E3E8EC;
  --line:rgba(11,13,15,.14);
  --line-2:rgba(11,13,15,.22);
  --grid-line:rgba(11,13,15,.06);
  --tx:#0B0D0F;
  --tx-mute:#565454;         /* Earth Grey carries the muted text */
  --tx-dim:#8A919C;

  /* inverted panel — a dark surface on the light page */
  --inv-bg:#0B0D0F;
  --inv-panel:#14181C;
  --inv-tx:#EDF1F4;
  --inv-mute:#8B939A;
  --inv-dim:#5C6472;
  --inv-line:rgba(255,255,255,.12);

  --glow:0 0 36px rgba(0,185,231,.20);
  --glow-soft:0 0 70px rgba(0,185,231,.12);
  --shadow-card:0 22px 50px -30px rgba(11,13,15,.26);
  --hero-lit-shadow:0 0 24px rgba(0,185,231,.30);
  --beam:.10;
  --nav-scrim:78%;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--tx);
  font-family:var(--f-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
::selection{background:var(--blue);color:var(--on-blue)}

/* ============================================================
   LAYOUT / TYPE UTILITIES
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--blue);display:inline-flex;
  align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--blue);opacity:.7}
.eyebrow.center::before{display:none}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-display);font-weight:600;font-size:.92rem;letter-spacing:.01em;
  padding:15px 26px;border-radius:100px;transition:.3s var(--ease);white-space:nowrap;
}
.btn--primary{background:var(--blue);color:var(--on-blue);box-shadow:var(--glow)}
.btn--primary:hover{background:var(--blue-bright);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,185,231,.45)}
.btn--ghost{border:1px solid var(--line-2);color:var(--tx)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue-600);box-shadow:var(--glow-soft)}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.reveal.lit{opacity:1;transform:none;filter:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  body{transition:none}
}