/* ═══════════════════════════════════════════════════════════
   MYODEV SPATIAL DESIGN SYSTEM — Design Tokens
   Brand colors extracted from myodev.cloud (Framer site)
   + MyoCare v5 spatial computing glass system
   ═══════════════════════════════════════════════════════════ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');

@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-thin-italic.otf') format('opentype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-light-italic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-regular-1.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-medium-italic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-bold.otf') format('opentype'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-bold-italic.otf') format('opentype'); font-weight: 600 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-black.otf') format('opentype'); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Youth'; src: url('../uploads/Youth%20Font/youth-black-italic.otf') format('opentype'); font-weight: 800 900; font-style: italic; font-display: swap; }

/* ── DARK MODE (default — matches myodev.cloud) ── */
:root, [data-theme="dark"] {
  --void: #0A0A0F;
  --void-sub: #111116;
  --glass: rgba(255,255,255,.05);
  --glass-hi: rgba(255,255,255,.08);
  --glass-solid: rgba(255,255,255,.12);
  --glass-inner: rgba(255,255,255,.03);
  --border: rgba(255,255,255,.08);
  --border-hi: rgba(255,255,255,.14);
  --border-sel: rgba(255,138,92,.3);

  --tx: #F0F0F2;
  --tx2: #A8A8B0;
  --tx3: #6B6B76;

  --or: #FF5A1F;
  --or2: #FF8A5C;
  --or-soft: rgba(255,90,31,.10);
  --or-glow: rgba(255,90,31,.15);
  --pu: #2D1B69;
  --pu-mid: #7B3FE4;
  --pu-soft: rgba(123,63,228,.10);
  --gr: #22C55E;
  --gr-soft: rgba(34,197,94,.10);
  --re: #EF4444;
  --bl: #3B82F6;

  --code-bg: rgba(255,255,255,.04);
  --code-kw: #C084FC;
  --code-fn: #60A5FA;
  --code-str: #4ADE80;
  --code-cmt: #6B6B76;
  --code-num: #FF8A5C;

  --shadow:
    0 0 0 .5px rgba(255,255,255,.04),
    0 2px 8px rgba(0,0,0,.3),
    0 8px 32px rgba(0,0,0,.25),
    0 24px 48px rgba(0,0,0,.15);
  --shadow-sm:
    0 0 0 .5px rgba(255,255,255,.04),
    0 1px 4px rgba(0,0,0,.2),
    0 4px 16px rgba(0,0,0,.15);
  --shadow-hi:
    0 0 0 .5px rgba(255,255,255,.06),
    0 4px 12px rgba(0,0,0,.3),
    0 16px 48px rgba(0,0,0,.25),
    0 32px 64px rgba(0,0,0,.15);
  --specular: inset 0 .5px 0 rgba(255,255,255,.08);
  --blur: 40px;
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --void: #e8e8ef;
  --void-sub: #dddde6;
  --glass: rgba(255,255,255,.72);
  --glass-hi: rgba(255,255,255,.85);
  --glass-solid: rgba(255,255,255,.92);
  --glass-inner: rgba(0,0,0,.028);
  --border: rgba(0,0,0,.06);
  --border-hi: rgba(0,0,0,.10);
  --border-sel: rgba(45,27,105,.25);

  --tx: #1A1033;
  --tx2: #5C5C6E;
  --tx3: #9E9EB0;

  --or: #FF5A1F;
  --or2: #FF8A5C;
  --or-soft: rgba(255,90,31,.08);
  --or-glow: rgba(255,90,31,.10);
  --pu: #2D1B69;
  --pu-mid: #7B3FE4;
  --pu-soft: rgba(123,63,228,.06);
  --gr: #22C55E;
  --gr-soft: rgba(34,197,94,.06);
  --re: #EF4444;
  --bl: #3B82F6;

  --code-bg: rgba(245,245,250,.85);
  --code-kw: #7B3FE4;
  --code-fn: #0D7AFF;
  --code-str: #16A34A;
  --code-cmt: #9E9EB0;
  --code-num: #FF5A1F;

  --shadow:
    0 0 0 .5px rgba(0,0,0,.04),
    0 2px 4px rgba(0,0,0,.03),
    0 8px 24px rgba(0,0,0,.06),
    0 24px 48px rgba(0,0,0,.04);
  --shadow-sm:
    0 0 0 .5px rgba(0,0,0,.04),
    0 1px 3px rgba(0,0,0,.03),
    0 4px 12px rgba(0,0,0,.04);
  --shadow-hi:
    0 0 0 .5px rgba(0,0,0,.05),
    0 4px 8px rgba(0,0,0,.04),
    0 12px 32px rgba(0,0,0,.08),
    0 32px 64px rgba(0,0,0,.06);
  --specular: inset 0 .5px 0 rgba(255,255,255,.85);
  --blur: 60px;
}

/* ── FONTS ── */
:root {
  --fn: 'Youth', 'Outfit', 'DM Sans', system-ui, sans-serif;
  --fn-body: 'Satoshi', 'DM Sans', system-ui, sans-serif;
  --mo: 'JetBrains Mono', ui-monospace, monospace;
  --r: 22px; --r-md: 16px; --r-sm: 12px; --r-xs: 8px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--fn-body);
  background: var(--void);
  color: var(--tx);
  min-height: 100vh;
  transition: background .4s ease, color .3s ease;
}