/**
 * ALGORIZMS OFFICIAL WEB DESIGN SYSTEM & CSS TOKENS (v4.0)
 * Unified Brand Architecture & Component Engineering
 * Synced directly with live site tokens from brand.algorizms.com
 */

/* 1. Extended Google Fonts (Alexandria, Almarai, Cairo, Plus Jakarta Sans, etc.) */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;600;700;800;900&family=Almarai:wght@400;700;800&family=Bebas+Neue&family=Cairo:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Montserrat:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700;800&display=swap');

/* 2. Sovereign Local Font Faces */
@font-face {
  font-family: 'Pasajero';
  src: url('/brand/assets/fonts/Pasajero.otf') format('opentype'),
       url('/brand/assets/fonts/Pasajero.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Libby';
  src: url('/brand/assets/fonts/LibbyRegular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Libby';
  src: url('/brand/assets/fonts/LibbyBold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Libby';
  src: url('/brand/assets/fonts/LibbyHeavy.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: 'Neoteric';
  src: url('/brand/assets/fonts/Neoteric-Regular.woff2') format('woff2'),
       url('/brand/assets/fonts/Neoteric-Regular.woff') format('woff'),
       url('/brand/assets/fonts/Neoteric-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'NEXT ART';
  src: url('/brand/assets/fonts/NEXT ART_Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'NEXT ART';
  src: url('/brand/assets/fonts/NEXT ART_SemiBold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'NEXT ART';
  src: url('/brand/assets/fonts/NEXT ART_Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'NEXT ART';
  src: url('/brand/assets/fonts/NEXT ART_Heavy.otf') format('opentype');
  font-weight: 900;
  font-display: swap;
}

:root {
  /* Canvas & Surface Tokens — Stealth Obsidian */
  --bg-dark: #04060A;
  --bg-surface: #090D16;
  --bg-card: rgba(13, 19, 32, 0.75);
  --bg-card-hover: rgba(20, 29, 48, 0.95);

  /* Text & Ink Tokens */
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --text-gold: #FCD34D;

  /* Three Capability Pillar Tokens */
  --color-pillar-tech: #0284C7;        /* Electric Tech Blue */
  --color-pillar-tech-cyan: #38BDF8;   /* Tech Cyan Highlight */
  --color-pillar-growth: #7C3AED;      /* Electric Growth Purple */
  --color-pillar-growth-pink: #EC4899; /* Growth Pink Accent */
  --color-pillar-data: #FCD34D;        /* Solar Amber Gold */
  --color-pillar-data-deep: #B8832A;   /* Deep Data Gold */

  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.16);
  --border-highlight: rgba(252, 211, 77, 0.35);
  --border-cyan-glow: rgba(56, 189, 248, 0.35);

  /* Official Typography Hierarchy */
  --font-brand: 'Pasajero', 'Space Grotesk', sans-serif;
  --font-display: 'NEXT ART', 'Neoteric', 'Montserrat', sans-serif;
  --font-cta: 'Libby', 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Space Grotesk', monospace;
  --font-tagline: 'Bebas Neue', 'Space Grotesk', sans-serif;
  --font-arabic: 'Cairo', 'Alexandria', 'Almarai', sans-serif;
  --font-arabic-heading: 'Alexandria', 'Cairo', sans-serif;
  --font-arabic-body: 'Almarai', 'Noto Kufi Arabic', 'Cairo', sans-serif;

  /* Shadows & Luminous Glows */
  --shadow-purple-glow: 0 0 30px rgba(124, 58, 237, 0.3);
  --shadow-blue-glow: 0 0 30px rgba(2, 132, 199, 0.3);
  --shadow-gold-glow: 0 0 30px rgba(252, 211, 77, 0.3);
}

/* Light Mode: Ancient Egypt Pharaonic Alabaster & Bling */
[data-theme="marble-bling"], [data-theme="light"] {
  --bg-dark: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-hover: rgba(241, 245, 249, 0.98);

  --text-main: #0F172A;
  --text-muted: #475569;
  --text-dim: #64748B;
  --text-gold: #D97706;

  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.16);
  --border-highlight: rgba(217, 119, 6, 0.4);
  --border-cyan-glow: rgba(2, 132, 199, 0.35);

  --shadow-purple-glow: 0 10px 30px rgba(124, 58, 237, 0.15);
  --shadow-blue-glow: 0 10px 30px rgba(2, 132, 199, 0.15);
  --shadow-gold-glow: 0 10px 30px rgba(217, 119, 6, 0.2);
}

/* Base Body Styles */
body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────
   UI COMPONENTS SPECIFICATION
─────────────────────────────────────────────────────────────── */

/* 1. BUTTON COMPONENTS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 12px;
  font-family: var(--font-cta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  border: none;
}

.btn-primary-purple {
  background: var(--color-pillar-growth);
  color: #0A0807;
  box-shadow: var(--shadow-purple-glow);
}
.btn-primary-purple:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.btn-tech-blue {
  background: var(--color-pillar-tech);
  color: #0A0807;
  box-shadow: var(--shadow-blue-glow);
}

.btn-data-gold {
  background: var(--color-pillar-data);
  color: #0A0807;
  box-shadow: var(--shadow-gold-glow);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-main);
}
.btn-outline:hover {
  border-color: var(--text-gold);
  color: var(--text-gold);
}

/* 2. CARD COMPONENTS */
.card-glass {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 32px;
  backdrop-filter: blur(12px);
  transition: all 0.25s ease;
}

.card-glass:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
}

/* 3. BADGES */
.badge-pillar {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.badge-growth { background: rgba(192, 132, 252, 0.15); color: var(--color-pillar-growth); border: 1px solid var(--color-pillar-growth); }
.badge-tech { background: rgba(56, 189, 248, 0.15); color: var(--color-pillar-tech); border: 1px solid var(--color-pillar-tech); }
.badge-data { background: rgba(252, 211, 77, 0.15); color: var(--color-pillar-data); border: 1px solid var(--color-pillar-data); }

/* 4. FORM INPUTS */
.input-tech {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.input-tech:focus {
  border-color: var(--text-gold);
}

/* ─────────────────────────────────────────────────────────────
   5. ALGORIZMS DIRECTION 1 GRADIENT FRAMING TOKENS
─────────────────────────────────────────────────────────────── */
:root {
  --color-brand-midnight-base: #022B59;  /* Deep Midnight Navy Base (Dark Anchor) */
  --color-brand-royal-purple: #7C3AED;   /* Mid-tone Transition */
  --color-brand-cyber-magenta: #EC4899;  /* Dynamic Glow Transition */
  --color-brand-amber-gold: #FCD34D;     /* Highlight / Apex */
  --color-brand-tech-cyan: #38BDF8;      /* Electric Light Blue (Tech Touches Only) */

  /* Standardized Framing Gradient */
  --gradient-brand-framing: linear-gradient(135deg, #022B59 0%, #7C3AED 40%, #EC4899 75%, #FCD34D 100%);
  --gradient-brand-rim: linear-gradient(180deg, #FCD34D 0%, #EC4899 35%, #7C3AED 70%, #022B59 100%);
  --gradient-tech-accent: linear-gradient(135deg, #38BDF8 0%, #7C3AED 100%);
}

/* ─────────────────────────────────────────────────────────────
   6. GOOGLE FLOW — WEB-NATIVE KINETIC ANIMATION SYSTEM (60FPS)
─────────────────────────────────────────────────────────────── */

/* Float: Weightless ambient drift with subtle rotation */
@keyframes googleFlowFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1.5deg);
  }
}

/* Breathe: Gentle volumetric pulse and specular bloom */
@keyframes googleFlowBreathe {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 15px 30px rgba(124, 58, 237, 0.25));
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 25px 45px rgba(236, 72, 153, 0.4));
  }
}

/* Tilt: 3D perspective kinetic sway */
@keyframes googleFlowTilt {
  0%, 100% {
    transform: perspective(800px) rotateY(-4deg) rotateX(2deg);
  }
  50% {
    transform: perspective(800px) rotateY(4deg) rotateX(-2deg);
  }
}

/* Orbit: Planetary node hover drift */
@keyframes googleFlowOrbit {
  0% {
    transform: rotate(0deg) translateY(-8px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateY(-8px) rotate(-360deg);
  }
}

/* Levitate: High-energy floating with tech cyan glow */
@keyframes googleFlowLevitate {
  0%, 100% {
    transform: translateY(0px);
    filter: drop-shadow(0 10px 25px rgba(56, 189, 248, 0.2));
  }
  50% {
    transform: translateY(-16px);
    filter: drop-shadow(0 30px 50px rgba(56, 189, 248, 0.45));
  }
}

/* Utility Classes for Google Flow */
.google-flow-float {
  animation: googleFlowFloat 4.5s ease-in-out infinite;
  will-change: transform;
}

.google-flow-breathe {
  animation: googleFlowBreathe 3.8s ease-in-out infinite;
  will-change: transform, filter;
}

.google-flow-tilt {
  animation: googleFlowTilt 6s ease-in-out infinite;
  will-change: transform;
}

.google-flow-orbit {
  animation: googleFlowOrbit 8s linear infinite;
  will-change: transform;
}

.google-flow-levitate {
  animation: googleFlowLevitate 4s ease-in-out infinite;
  will-change: transform, filter;
}

/* Interactive Magnetic Hover */
.google-flow-hover {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, filter;
}

.google-flow-hover:hover {
  transform: translateY(-10px) scale(1.06) rotate(-1.5deg);
  filter: drop-shadow(0 25px 50px rgba(124, 58, 237, 0.4)) drop-shadow(0 10px 20px rgba(56, 189, 248, 0.3));
}