/* ═══════════════════════════════════════════════
   OCEAN PRODUCTION — DESIGN TOKENS
   All CSS custom properties in one place
═══════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg:       #F0F4F8;
  --nav:      #0A0F1E;
  --nav2:     #111827;
  --card:     #FFFFFF;

  /* Borders */
  --line:     #E2E8F0;

  /* Text */
  --text:     #0F172A;
  --soft:     #64748B;
  --mute:     #94A3B8;

  /* Brand */
  --blue:       #2563EB;
  --blue-light: #EFF6FF;
  --blue-dark:  #1D4ED8;
  --cyan:       #06B6D4;

  /* Semantic */
  --green:        #10B981;
  --green-light:  #ECFDF5;
  --red:          #EF4444;
  --red-light:    #FEF2F2;
  --orange:       #F59E0B;
  --orange-light: #FFFBEB;
  --purple:       #8B5CF6;
  --purple-light: #F5F3FF;
  --pink:         #EC4899;

  /* Elevation */
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10);

  /* Sidebar width */
  --sidebar-w: 248px;

  /* Radius */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;

  /* Transition */
  --t: .15s ease;
  --t-spring: .35s cubic-bezier(.22,1,.36,1);
}