/* Forge | tokens.css
   Blue / purple / pink — matched to the Forge logo.
   Dark theme default, light theme available. */

:root {
  /* Surfaces — very dark navy, cool tint */
  --bg:             #07080D;
  --surface:        #0F1219;
  --surface-2:      #161A24;
  --surface-3:      #1F2430;
  --border:         #262C3A;
  --border-strong:  #363E50;

  /* Text */
  --text-strong:    #FFFFFF;
  --text:           #E4E8F0;
  --muted:          #8A93A8;
  --muted-2:        #5C6478;

  /* Brand — straight from the logo */
  --primary:        #4F7EFF;      /* electric blue */
  --primary-hover:  #3B6FEF;
  --primary-text:   #FFFFFF;
  --primary-soft:   rgba(79, 126, 255, 0.14);

  --brand-purple:   #8B5CF6;
  --brand-pink:     #EC4899;
  --accent-blue:    #4F7EFF;
  --accent-purple:  #8B5CF6;
  --accent-pink:    #EC4899;

  --success:        #22C55E;
  --warning:        #F59E0B;
  --error:          #EF4444;
  --info:           #4F7EFF;

  /* Signature gradient — matches the logo F */
  --gradient-forge: linear-gradient(135deg, #4F7EFF 0%, #8B5CF6 50%, #EC4899 100%);
  --gradient-soft:  linear-gradient(135deg,
                     rgba(79, 126, 255, 0.18) 0%,
                     rgba(139, 92, 246, 0.18) 50%,
                     rgba(236, 72, 153, 0.18) 100%);

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;

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

  /* Shadows */
  --sh-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md:   0 4px 14px rgba(0, 0, 0, 0.5);
  --sh-lg:   0 16px 40px rgba(0, 0, 0, 0.6);
  --sh-glow: 0 0 0 4px rgba(79, 126, 255, 0.22);
  --sh-brand: 0 12px 36px rgba(79, 126, 255, 0.28),
              0 4px 12px rgba(236, 72, 153, 0.18);

  /* Motion */
  --t-fast:      120ms;
  --t-normal:    200ms;
  --t-slow:      320ms;
  --t-drawer:    280ms;
  --ease-in:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.4, 0, 1, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Typography */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-display: 32px; --fs-h1: 24px; --fs-h2: 20px; --fs-h3: 17px;
  --fs-body: 15px; --fs-sm: 13px; --fs-tiny: 11px;
  --lh-body: 1.5; --lh-heading: 1.25;

  /* Layout */
  --header-h: 56px; --nav-h: 64px; --sidebar-w: 240px; --max-feed: 640px;
}

/* Light theme */
[data-theme="light"] {
  --bg:             #F5F7FC;
  --surface:        #FFFFFF;
  --surface-2:      #EFF2F9;
  --surface-3:      #E2E7F2;
  --border:         #E1E6F0;
  --border-strong:  #C7CEDC;
  --text-strong:    #0A0D14;
  --text:           #1A1F2C;
  --muted:          #5A6478;
  --muted-2:        #8A93A8;

  --primary:        #3B6FEF;
  --primary-hover:  #2E5FDB;
  --primary-text:   #FFFFFF;
  --primary-soft:   rgba(79, 126, 255, 0.10);

  --accent-pink:    #DB2777;

  --sh-sm:   0 1px 2px rgba(15, 18, 32, 0.06);
  --sh-md:   0 4px 14px rgba(15, 18, 32, 0.08);
  --sh-lg:   0 16px 40px rgba(15, 18, 32, 0.12);
  --sh-glow: 0 0 0 4px rgba(79, 126, 255, 0.18);
  --sh-brand: 0 12px 36px rgba(79, 126, 255, 0.18),
              0 4px 12px rgba(236, 72, 153, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-normal: 0ms; --t-slow: 0ms; --t-drawer: 0ms; }
}