/* ============================================================
   ZYNYTH — Brand Foundations
   Shared tokens for Logo Showcase + Design System
   ============================================================ */

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

:root {
  /* ---- Brand violet scale ---- */
  --v-50:  #F5F3FF;
  --v-100: #ECE8FF;
  --v-200: #D8CFFF;
  --v-300: #B9A9FF;
  --v-400: #957FFB;
  --v-500: #6D5EF5;   /* primary */
  --v-600: #5B49E0;   /* hover */
  --v-700: #4A39B8;
  --v-800: #372A8C;
  --v-900: #261E63;

  /* ---- Accents (AI shimmer) ---- */
  --accent-cyan:    #38E0DA;
  --accent-fuchsia: #F472D8;
  --accent-lime:    #B6E84A;

  /* ---- Semantic ---- */
  --success: #16B981;
  --warning: #F59E0B;
  --danger:  #EF4444;

  /* ---- Brand gradients ---- */
  --grad-brand:   linear-gradient(135deg, #7B68FF 0%, #5B49E0 55%, #4A39B8 100%);
  --grad-stella:  linear-gradient(135deg, #8B7BFF 0%, #B06CF0 45%, #F472D8 100%);
  --grad-shimmer: linear-gradient(120deg, #6D5EF5 0%, #B06CF0 45%, #38E0DA 100%);

  /* ---- LIGHT THEME (default / brand-priority) ---- */
  --bg:          #F4F2FB;
  --bg-wash:     radial-gradient(1200px 700px at 80% -10%, #EDE7FF 0%, rgba(244,242,251,0) 60%),
                 radial-gradient(900px 600px at -5% 110%, #E9F4FF 0%, rgba(244,242,251,0) 55%),
                 #F4F2FB;
  --surface:     #FFFFFF;
  --surface-2:   #FAF9FE;
  --text:        #1B1A2E;
  --text-2:      #4A4860;
  --muted:       #7C7A93;
  --border:      #E7E3F4;
  --border-2:    #EFECF8;

  /* glass (light) */
  --glass-bg:     rgba(255,255,255,0.55);
  --glass-brd:    rgba(255,255,255,0.75);
  --glass-shadow: 0 8px 30px rgba(64,49,140,0.10), 0 1px 0 rgba(255,255,255,0.6) inset;
  --glass-blur:   18px;

  --shadow-sm: 0 1px 2px rgba(38,30,99,0.06), 0 1px 3px rgba(38,30,99,0.05);
  --shadow-md: 0 6px 20px rgba(38,30,99,0.08), 0 2px 6px rgba(38,30,99,0.05);
  --shadow-lg: 0 18px 50px rgba(38,30,99,0.14);
  --ring:      0 0 0 4px rgba(109,94,245,0.18);

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --bg:        #0A0912;
  --bg-wash:   radial-gradient(1100px 700px at 82% -12%, rgba(109,94,245,0.22) 0%, rgba(10,9,18,0) 58%),
               radial-gradient(900px 600px at -8% 112%, rgba(176,108,240,0.16) 0%, rgba(10,9,18,0) 55%),
               #0A0912;
  --surface:   #141121;
  --surface-2: #1B1730;
  --text:      #ECEAF8;
  --text-2:    #BAB6D6;
  --muted:     #8B87A8;
  --border:    rgba(255,255,255,0.09);
  --border-2:  rgba(255,255,255,0.06);

  --glass-bg:     rgba(28,23,48,0.55);
  --glass-brd:    rgba(255,255,255,0.10);
  --glass-shadow: 0 10px 40px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 22px 60px rgba(0,0,0,0.55);
  --ring:      0 0 0 4px rgba(149,127,251,0.28);
}

/* ---- Resets ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-wash);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; line-height: 1.08; letter-spacing: -0.02em; }
a { color: inherit; }
.mono { font-family: var(--font-mono); }

/* ---- Reusable glass surface ---- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--glass-shadow);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}