/* ===========================================
   TOKENS.CSS — Dark Blue/Purple Theme
   Visual: gatographql features page
   =========================================== */

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

:root {
  /* -- Typography -- */
  --font-heading: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  /* -- Brand -- */
  --color-brand-primary:        #6F87F5;
  --color-brand-primary-hover:  #94A6F8;
  --color-brand-primary-pressed:#5673E8;
  --color-brand-secondary:      #4F6CE0;
  --color-brand-accent:         #B8C7FB;

  /* -- Surfaces (DARK) -- */
  --color-surface-body:          #0B0F1A;
  --color-surface-primary:       rgba(255,255,255,0.04);
  --color-surface-secondary:     rgba(255,255,255,0.06);
  --color-surface-tertiary:      rgba(255,255,255,0.08);
  --color-surface-elevated:      rgba(255,255,255,0.07);
  --color-surface-dark:          #060912;
  --color-surface-dark-elevated: #0E1225;

  /* -- Text (light on dark) -- */
  --color-text-primary:       #F1F5F9;
  --color-text-secondary:     rgba(255,255,255,0.65);
  --color-text-muted:         rgba(255,255,255,0.42);
  --color-text-light:         rgba(255,255,255,0.28);
  --color-text-inverse:       #FFFFFF;
  --color-text-inverse-muted: rgba(255,255,255,0.55);
  --color-text-link:          #94A6F8;
  --color-text-link-hover:    #B8C7FB;

  /* -- Borders (dark mode) -- */
  --color-border-default: rgba(255,255,255,0.08);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-border-strong:  rgba(255,255,255,0.14);
  --color-border-focus:   #6F87F5;
  --color-border-dark:    rgba(255,255,255,0.08);

  /* -- Gradients -- */
  --gradient-primary: linear-gradient(135deg, #6F87F5 0%, #4F6CE0 100%);
  --gradient-glow:    radial-gradient(ellipse at center, rgba(111,135,245,0.30) 0%, rgba(79,108,224,0.08) 40%, transparent 70%);
  --gradient-dark:    linear-gradient(180deg, #060912 0%, #0B0F1A 100%);
  --gradient-body:    linear-gradient(170deg, #0B0F1A 0%, #0F0A2A 30%, #0B0F1A 60%, #091020 100%);

  /* -- Spacing (4px base) -- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* -- Border Radius -- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* -- Shadows (dark mode - glow-based) -- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm:   0 2px 6px rgba(0,0,0,0.40);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.50);
  --shadow-lg:   0 10px 25px rgba(0,0,0,0.50);
  --shadow-xl:   0 20px 40px rgba(0,0,0,0.60);
  --shadow-focus:      0 0 0 3px rgba(111,135,245,0.45);
  --shadow-glow-sm:    0 0 20px rgba(111,135,245,0.20);
  --shadow-glow-md:    0 0 40px rgba(111,135,245,0.25);
  --shadow-navbar:     0 1px 0 rgba(255,255,255,0.05);
  --shadow-dropdown:   0 10px 40px rgba(0,0,0,0.60);
  --shadow-card-hover: 0 8px 30px rgba(111,135,245,0.15), 0 0 1px rgba(111,135,245,0.30);

  /* -- Motion -- */
  --duration-fast:     100ms;
  --duration-normal:   200ms;
  --duration-moderate: 300ms;
  --duration-slow:     400ms;
  --duration-slower:   500ms;
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -- Z-index -- */
  --z-base:      0;
  --z-raised:    1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-tooltip:  60;

  /* -- Layout -- */
  --container-max: 1200px;
  --container-px:  2rem;
  --navbar-height: 72px;
  --section-py:    6rem;
}

@media (max-width: 991px) {
  :root {
    --container-px: 1.5rem;
    --section-py: 4rem;
    --navbar-height: 64px;
  }
}
@media (max-width: 575px) {
  :root {
    --container-px: 1rem;
    --section-py: 3rem;
  }
}