/* ── Design tokens ── */
:root {
  color-scheme: dark;

  /* Brand (derived from logo.webp — deep purple/violet + orange) */
  --brand-bg:        #0e0818;
  --brand-bg-alt:    #170b28;
  --brand-violet:    #7c3aed;
  --brand-violet-2:  #a855f7;
  --brand-orange:    #f5883c;

  /* Surfaces */
  --clr-bg:            #0e0818;
  --clr-bg-elevated:   #150c26;
  --clr-surface:       rgba(255, 255, 255, 0.05);
  --clr-surface-2:     rgba(255, 255, 255, 0.08);
  --clr-border:        rgba(255, 255, 255, 0.09);
  --clr-border-hover:  rgba(255, 255, 255, 0.20);

  /* Text */
  --clr-text:        #f2eefb;
  --clr-text-dim:     rgba(242, 238, 251, 0.62);
  --clr-muted:        rgba(242, 238, 251, 0.42);

  /* Semantic */
  --clr-up:      #22c55e;
  --clr-up-bg:   rgba(34, 197, 94, 0.14);
  --clr-down:    #f43f5e;
  --clr-down-bg: rgba(244, 63, 94, 0.14);
  --clr-iran:    #4fc3f7;
  --clr-germany: #ef5350;

  /* Asset accent colors */
  --clr-dollar:  #22c55e;
  --clr-euro:    #a855f7;
  --clr-lira:    #f7b84b;
  --clr-gold:    #ffd54f;
  --clr-pound:   #5ba4f5;
  --clr-ton:     #38bdf8;
  --clr-brent:   #6ea5bd;
  --clr-btc:     #F7931A;
  --clr-eth:     #497493;
  --clr-sol:     #00FFA3;
  --clr-bnb:     #F3BA2F;
  --clr-xrp:     #1b95ca;
  --clr-doge:    #cb9800;
  --clr-xau:     #FFD700;
  --clr-wti:     #6cde57;
  --clr-ng:      #3aa947;
  --clr-aed:     #00732F;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 48px -16px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 0 1px rgba(124,58,237,0.25), 0 8px 32px -8px rgba(124,58,237,0.35);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Blur */
  --blur: blur(20px);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur: 0.28s;
  --dur-slow: 0.5s;

  /* Layout */
  --bottom-nav-h: 64px;
  --header-h: 56px;
  --page-max-w: 640px;
  --sidenav-w: 230px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --clr-bg:            #f5f4fb;
  --clr-bg-elevated:   #ffffff;
  --clr-surface:       rgba(20, 10, 40, 0.035);
  --clr-surface-2:     rgba(20, 10, 40, 0.06);
  --clr-border:        rgba(20, 10, 40, 0.08);
  --clr-border-hover:  rgba(20, 10, 40, 0.18);

  --clr-text:        #1a1025;
  --clr-text-dim:     rgba(26, 16, 37, 0.65);
  --clr-muted:        rgba(26, 16, 37, 0.45);

  --shadow-sm: 0 1px 2px rgba(20,10,40,0.06);
  --shadow-md: 0 8px 24px -8px rgba(20,10,40,0.14), 0 2px 8px rgba(20,10,40,0.06);
  --shadow-lg: 0 20px 48px -16px rgba(20,10,40,0.18), 0 4px 16px rgba(20,10,40,0.08);
  --shadow-glow: 0 0 0 1px rgba(124,58,237,0.18), 0 8px 32px -8px rgba(124,58,237,0.22);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;

    --clr-bg:            #f5f4fb;
    --clr-bg-elevated:   #ffffff;
    --clr-surface:       rgba(20, 10, 40, 0.035);
    --clr-surface-2:     rgba(20, 10, 40, 0.06);
    --clr-border:        rgba(20, 10, 40, 0.08);
    --clr-border-hover:  rgba(20, 10, 40, 0.18);

    --clr-text:        #1a1025;
    --clr-text-dim:     rgba(26, 16, 37, 0.65);
    --clr-muted:        rgba(26, 16, 37, 0.45);

    --shadow-sm: 0 1px 2px rgba(20,10,40,0.06);
    --shadow-md: 0 8px 24px -8px rgba(20,10,40,0.14), 0 2px 8px rgba(20,10,40,0.06);
    --shadow-lg: 0 20px 48px -16px rgba(20,10,40,0.18), 0 4px 16px rgba(20,10,40,0.08);
    --shadow-glow: 0 0 0 1px rgba(124,58,237,0.18), 0 8px 32px -8px rgba(124,58,237,0.22);
  }
}