@import "tailwindcss";

/* ═══════════════════════════════════════════════════════════
   🌌 BLACKROAD OS OFFICIAL BRAND DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════
   CRITICAL: This is the OFFICIAL BlackRoad brand system.
   All projects MUST use these exact colors and values.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Official Brand Colors */
  --black: #000000;
  --white: #FFFFFF;
  --amber: #F5A623;
  --orange: #F26522;
  --hot-pink: #FF1D6C;      /* Primary Brand Color */
  --magenta: #E91E63;
  --electric-blue: #2979FF;
  --sky-blue: #448AFF;
  --violet: #9C27B0;
  --deep-purple: #5E35B1;

  /* Brand Gradient (Golden Ratio positions 38.2% & 61.8%) */
  --gradient-brand: linear-gradient(135deg,
    var(--amber) 0%,
    var(--hot-pink) 38.2%,
    var(--violet) 61.8%,
    var(--electric-blue) 100%);

  /* Golden Ratio Spacing (φ = 1.618) */
  --phi: 1.618;
  --space-xs: 8px;      /* Base */
  --space-sm: 13px;     /* 8 × φ */
  --space-md: 21px;     /* 13 × φ */
  --space-lg: 34px;     /* 21 × φ */
  --space-xl: 55px;     /* 34 × φ */
  --space-2xl: 89px;    /* 55 × φ */
  --space-3xl: 144px;   /* 89 × φ */

  /* Animation Easing */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Legacy support for existing code */
  --background: var(--black);
  --foreground: var(--white);
}

@theme inline {
  --color-background: var(--black);
  --color-foreground: var(--white);
  --color-primary: var(--hot-pink);
  --color-secondary: var(--electric-blue);
  --color-accent: var(--amber);
  --color-hot-pink: var(--hot-pink);
  --color-electric-blue: var(--electric-blue);
  --color-violet: var(--violet);
  --color-amber: var(--amber);
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', var(--font-geist-sans);
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--black);
    --foreground: var(--white);
  }
}

body {
  background: var(--black);
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  line-height: 1.618; /* Golden Ratio */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}