/* =====================================================================
   IntelliCubix — Design System
   Brand palette extracted from the company homepage.
   Theme: dark/tech, signature cyan -> magenta gradient, orange accent.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Brand accents (constant across themes) */
  --cyan:        #19D3DA;
  --cyan-2:      #5BE9EF;
  --magenta:     #E0218A;
  --magenta-2:   #F25FB0;
  --orange:      #FF5A2C;
  --orange-2:    #FF8A5C;
  --violet:      #7C5CFF;

  --gradient:        linear-gradient(100deg, var(--cyan) 0%, var(--magenta) 100%);
  --gradient-warm:   linear-gradient(100deg, var(--magenta) 0%, var(--orange) 100%);
  --gradient-soft:   linear-gradient(135deg, rgba(25,211,218,.16), rgba(224,33,138,.16));
  --glow-cyan:       0 0 24px rgba(25,211,218,.45);
  --glow-magenta:    0 0 24px rgba(224,33,138,.40);

  /* Typography */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Radii & motion */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --sidebar-w: 264px;
  --topbar-h: 68px;
}

/* ---------- Dark theme (default) ---------- */
:root, [data-theme='dark'] {
  --bg:          #08080A;
  --bg-grad:     radial-gradient(1200px 700px at 78% -10%, rgba(224,33,138,.10), transparent 60%),
                 radial-gradient(1000px 700px at 0% 0%, rgba(25,211,218,.08), transparent 55%),
                 #08080A;
  --surface:     #131318;
  --surface-2:   #1A1A21;
  --surface-3:   #22222B;
  --surface-hover: #20202a;
  --border:      rgba(255,255,255,.08);
  --border-2:    rgba(255,255,255,.14);
  --text:        #F4F4F7;
  --text-muted:  #9B9BA6;
  --text-faint:  #64646F;
  --shadow:      0 18px 48px -18px rgba(0,0,0,.7);
  --shadow-sm:   0 6px 18px -10px rgba(0,0,0,.6);
  --glass:       rgba(20,20,26,.72);
  --on-accent:   #07090b;
  --track:       rgba(255,255,255,.07);
}

/* ---------- Light theme ---------- */
[data-theme='light'] {
  --bg:          #F5F6FB;
  --bg-grad:     radial-gradient(1100px 640px at 82% -8%, rgba(224,33,138,.10), transparent 60%),
                 radial-gradient(900px 600px at -5% 0%, rgba(25,211,218,.12), transparent 55%),
                 #F5F6FB;
  --surface:     #FFFFFF;
  --surface-2:   #F4F5FA;
  --surface-3:   #ECEEF6;
  --surface-hover: #F0F1F8;
  --border:      rgba(12,14,30,.09);
  --border-2:    rgba(12,14,30,.16);
  --text:        #14141A;
  --text-muted:  #5A5B68;
  --text-faint:  #9A9BAA;
  --shadow:      0 22px 50px -26px rgba(31,33,73,.30);
  --shadow-sm:   0 8px 20px -14px rgba(31,33,73,.28);
  --glass:       rgba(255,255,255,.78);
  --on-accent:   #FFFFFF;
  --track:       rgba(10,12,30,.07);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-grad) fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s var(--ease), color .25s var(--ease);
}

h1, h2, h3, h4, .display { font-family: var(--font-display); letter-spacing: -.02em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(25,211,218,.30); }

.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.grad-text {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }

/* The brand logo (image from /static/logo.png) */
.ic-cube {
  width: 36px; height: 36px; flex: none;
  background: url('/static/logo.png') center / contain no-repeat;
  filter: drop-shadow(0 0 9px rgba(25,211,218,.32));
  animation: cubeFloat 5.5s ease-in-out infinite;
}
.ic-cube::before, .ic-cube::after { content: none; }
@keyframes cubeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; font-size: 17px; }
.wordmark b:first-child { color: var(--cyan); }
.wordmark b:last-child { color: var(--magenta); font-weight: 800; }