@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   AMIXON DIGITAL — DESIGN SYSTEM TOKENS & VARIABLES
   Typography: Plus Jakarta Sans (Headings & Body) + Space Grotesk (Display)
   Palette & Motion: High-end obsidian & cyan digital agency aesthetic
   ========================================================================== */

/* --------------------------------------------------------------------------
   @FONT-FACE DEFINITIONS (BERLIN SANS FB - LEGACY LOGO EMBLEM)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Berlin Sans FB Demi';
  src: url('../assets/fonts/brlnsdb.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Berlin Sans FB';
  src: url('../assets/fonts/brlnsb.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Berlin Sans FB';
  src: url('../assets/fonts/brlnsr.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surface Foundations */
  --bg-black: #050505;
  --bg-primary: #070709;
  --bg-secondary: #0D0D11;
  --bg-surface: #121216;
  --bg-surface-elevated: #18181E;
  --bg-card: rgba(255, 255, 255, 0.035);
  --bg-card-hover: rgba(255, 255, 255, 0.065);

  /* Brand Accent Tokens (Zero AI Gradients) */
  --accent-cyan: #27FCF2;
  --accent-silver: #E2E8F0;
  --accent-whatsapp: #10B981;
  --accent-instagram: #E1306C;
  --accent-gold: #F59E0B;

  /* Solid Accent & Border Tokens */
  --gradient-creativeans: #27FCF2;
  --gradient-creativeans-rev: #27FCF2;
  --gradient-pill-border: rgba(255, 255, 255, 0.15);
  --gradient-card-glow: radial-gradient(circle at 50% 0%, rgba(39, 252, 242, 0.08), transparent 70%);

  /* Borders & Glassmorphism */
  --border-glass: rgba(255, 255, 255, 0.12);
  --border-glass-light: rgba(255, 255, 255, 0.2);
  --border-glass-bright: rgba(255, 255, 255, 0.35);
  --border-glass-dim: rgba(255, 255, 255, 0.06);

  /* Typography Colors (Elevated Contrast & High Legibility) */
  --text-brand-white: #FFFFFF;
  --text-primary: #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-muted: #CBD5E1;
  --text-dim: #94A3B8;
  --text-inverse: #050505;

  /* HEADINGS & DISPLAY: Outfit (Contemporary Digital Studio Typography) */
  --font-heading: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-display: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-brand: 'Berlin Sans FB Demi', 'Berlin Sans FB', sans-serif;
  --font-brand-legacy: 'Berlin Sans FB Demi', 'Berlin Sans FB', sans-serif;
  
  /* BODY: Plus Jakarta Sans & Modern San Francisco */
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;

  /* MONOSPACE / HUD: JetBrains Mono */
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Sizing & Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Container & Max Widths */
  --container-max: 1240px;
  --container-wide: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 700ms;

  /* Z-Index Structure */
  --z-preloader: 10050;
  --z-modal: 10000;
  --z-cursor: 9999;
  --z-floating-nav: 999;
  --z-marquee-bar: 990;
  --z-hero-content: 20;
  --z-hero-3d: 5;
  --z-ambient: 1;
}