/* =============================================
   AI HUB v2 — DESIGN TOKENS
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400&display=swap');

:root {
  /* Core Brand */
  --blue:        #0A84FF;
  --blue-mid:    #0066CC;
  --blue-deep:   #004499;
  --blue-soft:   #E8F3FF;
  --blue-glow:   rgba(10,132,255,0.25);
  --cyan:        #00C2E0;
  --indigo:      #5856D6;

  /* Light Theme */
  --bg:          #F5F7FA;
  --bg-white:    #FFFFFF;
  --bg-card:     #FFFFFF;
  --bg-subtle:   #EEF2F7;
  --bg-glass:    rgba(255,255,255,0.85);
  --txt-1:       #0A1628;
  --txt-2:       #3D5066;
  --txt-3:       #8096AE;
  --border:      #DDE4EE;
  --border-soft: #EEF2F7;
  --shadow-sm:   0 2px 8px rgba(10,22,40,0.06);
  --shadow-md:   0 8px 32px rgba(10,22,40,0.10);
  --shadow-lg:   0 24px 64px rgba(10,22,40,0.14);
  --shadow-blue: 0 8px 32px rgba(10,132,255,0.28);

  /* Typography */
  --font-head:   'Fraunces', Georgia, serif;
  --font-body:   'Plus Jakarta Sans', system-ui, sans-serif;

  /* Gradients */
  --grad-brand:  linear-gradient(135deg, #0A84FF 0%, #0066CC 60%, #5856D6 100%);
  --grad-hero:   linear-gradient(160deg, #EBF4FF 0%, #F5F7FA 50%, #EEF0FF 100%);
  --grad-card:   linear-gradient(160deg, #fff 0%, #F8FAFD 100%);

  /* Spacing / Shape */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --nav-h: 74px;

  /* Motion */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:      150ms;
  --t-med:       280ms;
  --t-slow:      500ms;
}

[data-theme="dark"] {
  --bg:          #080F1A;
  --bg-white:    #0D1726;
  --bg-card:     #0D1726;
  --bg-subtle:   #111F32;
  --bg-glass:    rgba(13,23,38,0.9);
  --txt-1:       #EBF2FF;
  --txt-2:       #7BA8CC;
  --txt-3:       #3E5A75;
  --border:      #1A2D45;
  --border-soft: #152236;
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:   0 24px 64px rgba(0,0,0,0.6);
  --grad-hero:   linear-gradient(160deg, #060E1A 0%, #080F1A 50%, #0A0C1E 100%);
  --grad-card:   linear-gradient(160deg, #0D1726 0%, #0A1220 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--txt-1);
  overflow-x: hidden;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea { font-family: inherit; }