/*
  Shemify Design Tokens — Tesla/iOS Grade
  ==========================================
  APPROVED design system. Single source of truth.
  Dark mode is the default. Light mode via html.light class.

  Legacy aliases at bottom for backward compatibility
  with existing JS that references old variable names.
*/

/* ═══ DARK MODE (Default) ═══ */
:root {
  /* Depth palette — 5-level surface system */
  --void: #060608;
  --base: #0C0C10;
  --raised: #14141A;
  --elevated: #1A1A22;
  --floating: #22222C;

  /* Glass surfaces */
  --glass-sb: rgba(12,12,16,.82);
  --glass-hd: rgba(6,6,8,.75);
  --glass-card: rgba(20,20,26,.72);

  /* Text hierarchy — 5 levels */
  --ink: #F0F0F4;
  --ink-2: #9898A8;
  --ink-3: #6A6A7A;
  --ink-4: #42424F;
  --ink-5: #2C2C38;

  /* Gold accent — warm amber, premium */
  --gold: #C8A04C;
  --gold-bright: #D4B060;
  --gold-glow: rgba(200,160,76,.12);
  --gold-glow-strong: rgba(200,160,76,.22);
  --gold-glow-ring: rgba(200,160,76,.18);

  /* Semantic colors — vivid against dark */
  --green: #4ADE80;
  --green-glow: rgba(74,222,128,.14);
  --red: #F87171;
  --red-glow: rgba(248,113,113,.12);
  --amber: #FBBF24;
  --amber-glow: rgba(251,191,36,.12);
  --blue: #60A5FA;
  --blue-glow: rgba(96,165,250,.12);

  /* Radius scale */
  --r: 14px;
  --r-sm: 10px;
  --r-lg: 20px;
  --r-xl: 26px;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Animation curves */
  --spring: cubic-bezier(.16,1,.3,1);
  --spring-bounce: cubic-bezier(.34,1.4,.64,1);
  --ease-out: cubic-bezier(0,.55,.45,1);

  /* ═══ LEGACY ALIASES ═══
     Maps old variable names → new tokens.
     Existing JS/CSS that uses --text, --muted, etc. still works.
  */
  --brand-red: #A93E17;
  --brand-blue: #15399A;
  --brand-red-rgb: 169, 62, 23;
  --brand-blue-rgb: 21, 57, 154;

  --bg: var(--void);
  --bg-alt: var(--base);
  --card-bg: var(--raised);
  --surface: var(--raised);
  --surface-2: var(--elevated);
  --text: var(--ink);
  --muted: var(--ink-3);
  --border: var(--ink-5);
  --border-strong: var(--ink-4);
  --accent: var(--gold);
  --accent-soft: var(--gold-glow);
  --accent-danger: var(--red);
  --danger: var(--red);
  --success: var(--green);
  --warning: var(--amber);
  --info: var(--blue);

  --radius-lg: var(--r-lg);
  --radius-md: var(--r);
  --radius-sm: var(--r-sm);

  --shadow-soft: 0 4px 16px rgba(0,0,0,.3);
  --shadow: 0 8px 32px rgba(0,0,0,.4);
  --transition-fast: 150ms var(--spring);

  --nui-header-height: 60px;
  --nui-sidebar-width: 258px;
  --nui-sidebar-collapsed-width: 64px;

  --sfy-touch-target: 44px;
  --sfy-bottom-nav-height: 56px;
}

/* ═══ LIGHT MODE ═══ */
html.light,
html[data-theme="light"] {
  --void: #F2F1EE;
  --base: #FAFAF8;
  --raised: #FFFFFF;
  --elevated: #FFFFFF;
  --floating: #FFFFFF;

  --glass-sb: rgba(250,250,248,.9);
  --glass-hd: rgba(242,241,238,.78);
  --glass-card: rgba(255,255,255,.8);

  --ink: #1A1917;
  --ink-2: #57564F;
  --ink-3: #8A8880;
  --ink-4: #B5B3AB;
  --ink-5: #D6D4CE;

  --gold: #96750A;
  --gold-bright: #7D6208;
  --gold-glow: rgba(150,117,10,.08);
  --gold-glow-strong: rgba(150,117,10,.14);
  --gold-glow-ring: rgba(150,117,10,.1);

  --green: #0D9448;
  --green-glow: rgba(13,148,72,.08);
  --red: #DC2626;
  --red-glow: rgba(220,38,38,.06);
  --amber: #B45309;
  --amber-glow: rgba(180,83,9,.06);
  --blue: #2563EB;
  --blue-glow: rgba(37,99,235,.06);

  --bg: var(--void);
  --bg-alt: var(--base);
  --card-bg: var(--raised);
  --surface: var(--raised);
  --shadow-soft: 0 4px 16px rgba(0,0,0,.04);
  --shadow: 0 8px 32px rgba(0,0,0,.06);
}

/* ═══ GLOBAL RESETS ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family: var(--font);
  background: var(--void);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  /* Ambient atmosphere */
  background-image:
    radial-gradient(ellipse 90% 55% at 72% 15%, rgba(200,160,76,.06), transparent),
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(96,165,250,.03), transparent);
  background-attachment: fixed;
}

html.light body,
html[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 90% 50% at 65% 5%, rgba(150,117,10,.05), transparent),
    radial-gradient(ellipse 70% 40% at 30% 90%, rgba(37,99,235,.03), transparent);
}

::selection { background: rgba(200,160,76,.25); color: var(--gold-bright); }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.1); }
html.light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.08); }
html.light ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.14); }

/* Focus ring */
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gold-glow-ring); }
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══ KEYFRAMES ═══ */
@keyframes pulse-green {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.6), 0 0 10px rgba(74,222,128,.5); opacity: 1; }
  50% { box-shadow: 0 0 0 4px rgba(74,222,128,0), 0 0 6px rgba(74,222,128,.3); opacity: .7; }
}

@keyframes logo-breathe {
  0%,100% { box-shadow: 0 4px 20px rgba(200,160,76,.25), 0 0 50px rgba(200,160,76,.1); }
  50% { box-shadow: 0 4px 30px rgba(200,160,76,.4), 0 0 80px rgba(200,160,76,.18); }
}

@keyframes notif-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.7), 0 0 8px rgba(248,113,113,.5); }
  70% { box-shadow: 0 0 0 5px rgba(248,113,113,0), 0 0 4px rgba(248,113,113,.2); }
}

/* Hidden utility */
.hidden { display: none !important; }