/* ═══════════════════════════════════════════════════════════════════
   UPick Design System — UU Teal Brand + Dark-first Data Tool
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand (Teal) ── */
  --brand:            #4BC8C0;
  --brand-hover:      #83DED2;
  --brand-pressed:    #1A8A8A;
  --brand-disabled:   #81EDDB;
  --brand-gradient:   linear-gradient(135deg, #42D7CD 0%, #3AE4C4 100%);
  --brand-glow:       0 0 20px rgba(75, 200, 192, 0.25);

  /* ── Surface / Background ── */
  --surface-0:        #0B0D14;   /* deepest bg */
  --surface-1:        #11131C;   /* main bg */
  --surface-2:        #181B26;   /* card / panel */
  --surface-3:        #1F2332;   /* elevated / hover */
  --surface-4:        #282D3D;   /* input bg */

  /* ── Text ── */
  --text-primary:     #F0F1F5;
  --text-secondary:   rgba(240, 241, 245, 0.72);
  --text-tertiary:    rgba(240, 241, 245, 0.44);
  --text-disabled:    rgba(240, 241, 245, 0.22);

  /* ── Border ── */
  --border-default:   rgba(255, 255, 255, 0.08);
  --border-strong:    rgba(255, 255, 255, 0.14);
  --border-accent:    rgba(75, 200, 192, 0.30);

  /* ── Semantic ── */
  --success:          #34D399;
  --success-bg:       rgba(52, 211, 153, 0.10);
  --warning:          #FBBF24;
  --warning-bg:       rgba(251, 191, 36, 0.10);
  --danger:           #F87171;
  --danger-bg:        rgba(248, 113, 113, 0.10);
  --info:             #60A5FA;
  --info-bg:          rgba(96, 165, 250, 0.10);

  /* ── Sizing ── */
  --radius-xs:        4px;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        14px;
  --topbar-h:         52px;

  /* ── Shadows ── */
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.5);

  /* ── Transitions ── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    350ms;
}

/* ── Light Theme Overrides ── */
[data-theme="light"] {
  --surface-0:        #F0F5F5;
  --surface-1:        #F5F8F8;
  --surface-2:        #FFFFFF;
  --surface-3:        #F0F5F5;
  --surface-4:        #E8EDED;

  --text-primary:     #1A1C23;
  --text-secondary:   rgba(26, 28, 35, 0.68);
  --text-tertiary:    rgba(26, 28, 35, 0.40);
  --text-disabled:    rgba(26, 28, 35, 0.20);

  --border-default:   rgba(0, 0, 0, 0.08);
  --border-strong:    rgba(0, 0, 0, 0.14);
  --border-accent:    rgba(75, 200, 192, 0.35);

  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.12);
}