/* ============================================================
   Starfed / Constellation: Universal Design Tokens (CSS)
   Derived from the Starfed isometric box logo.
   Import this file or copy the variables into your project.
   ============================================================ */

:root {
  /* ---- Brand Colors ---- */
  --sf-primary:        #821E7E;
  --sf-primary-deep:   #4E117B;
  --sf-primary-dark:   #1A0578;
  --sf-primary-light:  #C94B9E;
  --sf-accent:         #E85D9E;
  --sf-accent-glow:    #FF7EB6;

  /* ---- Neutrals (dark-first) ---- */
  --sf-ink-900: #0B0E1A;
  --sf-ink-800: #141830;
  --sf-ink-700: #1E2340;
  --sf-ink-600: #2A3154;
  --sf-ink-500: #4A5578;
  --sf-ink-400: #8B94B8;
  --sf-ink-300: #C5CBDF;
  --sf-ink-200: #E8EAF2;
  --sf-ink-100: #F5F6FA;
  --sf-ink-50:  #FFFFFF;

  /* ---- Semantic ---- */
  --sf-success:      #4ADE80;
  --sf-success-dim:  #14532D;
  --sf-warning:      #FBBF24;
  --sf-warning-dim:  #451A03;
  --sf-error:        #F87171;
  --sf-error-dim:    #450A0A;
  --sf-info:         #60A5FA;
  --sf-info-dim:     #172554;

  /* ---- Gradients ---- */
  --sf-grad-brand:           linear-gradient(135deg, #1A0578 0%, #4E117B 35%, #821E7E 70%, #C94B9E 100%);
  --sf-grad-brand-vertical:  linear-gradient(180deg, #C94B9E 0%, #821E7E 50%, #1A0578 100%);
  --sf-grad-brand-radial:    radial-gradient(circle at 50% 0%, #C94B9E 0%, #821E7E 45%, #1A0578 100%);
  --sf-grad-cosmic:          linear-gradient(135deg, #0B0E1A 0%, #1A0578 50%, #4E117B 100%);

  /* ---- Typography ---- */
  --sf-font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --sf-font-body:    'Inter', system-ui, sans-serif;
  --sf-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --sf-text-xs:  0.75rem;
  --sf-text-sm:  0.875rem;
  --sf-text-md:  1rem;
  --sf-text-lg:  1.125rem;
  --sf-text-xl:  1.25rem;
  --sf-text-2xl: 1.5rem;
  --sf-text-3xl: 1.875rem;
  --sf-text-4xl: 2.25rem;
  --sf-text-5xl: 3rem;
  --sf-text-6xl: 3.75rem;

  --sf-weight-regular:  400;
  --sf-weight-medium:   500;
  --sf-weight-semibold: 600;
  --sf-weight-bold:     700;
  --sf-weight-extrabold: 800;

  /* ---- Spacing ---- */
  --sf-space-1:  0.25rem;
  --sf-space-2:  0.5rem;
  --sf-space-3:  0.75rem;
  --sf-space-4:  1rem;
  --sf-space-5:  1.25rem;
  --sf-space-6:  1.5rem;
  --sf-space-8:  2rem;
  --sf-space-10: 2.5rem;
  --sf-space-12: 3rem;
  --sf-space-16: 4rem;
  --sf-space-20: 5rem;
  --sf-space-24: 6rem;

  /* ---- Radius ---- */
  --sf-radius-sm:   0.25rem;
  --sf-radius-md:   0.5rem;
  --sf-radius-lg:   0.75rem;
  --sf-radius-xl:   1rem;
  --sf-radius-2xl:  1.5rem;
  --sf-radius-full: 9999px;

  /* ---- Shadows ---- */
  --sf-shadow-sm:       0 1px 2px rgba(11, 14, 26, 0.3);
  --sf-shadow-md:       0 4px 6px rgba(11, 14, 26, 0.3);
  --sf-shadow-lg:       0 10px 15px rgba(11, 14, 26, 0.4);
  --sf-shadow-glow:     0 0 20px rgba(130, 30, 126, 0.5);
  --sf-shadow-glow-pink: 0 0 30px rgba(201, 75, 158, 0.6);

  /* ---- Animation ---- */
  --sf-duration-fast:   150ms;
  --sf-duration-normal: 300ms;
  --sf-duration-slow:   500ms;
  --sf-duration-slower: 1000ms;

  --sf-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --sf-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --sf-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --sf-ease-bounce:  cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* ---- Light theme overrides ---- */
[data-theme="light"], .theme-light {
  --sf-ink-900: #F5F6FA;
  --sf-ink-800: #FFFFFF;
  --sf-ink-700: #FFFFFF;
  --sf-ink-600: #E2E4EE;
  --sf-ink-500: #8B94B8;
  --sf-ink-400: #6B7394;
  --sf-ink-300: #4A5578;
  --sf-ink-200: #1E2340;
  --sf-ink-100: #0B0E1A;
  --sf-ink-50:  #141830;

  --sf-shadow-sm: 0 1px 2px rgba(11, 14, 26, 0.08);
  --sf-shadow-md: 0 4px 6px rgba(11, 14, 26, 0.1);
  --sf-shadow-lg: 0 10px 15px rgba(11, 14, 26, 0.12);
}