/* ============================================
   FuseIoT — Design Tokens
   Based on fuse-vertical-normal.svg colors
   Ref: 11-typography-color-system.md
   ============================================ */

:root {
  /* Brand Colors (from logo SVG) */
  --blue: #3436B1;
  --blue-dark: #202AA2;
  --blue-mid: #2B39A1;
  --red: #CF2A2E;
  --red-dark: #A22D24;
  --orange: #F47D4E;
  --orange-dark: #DE5F48;
  --green: #61B65D;
  --green-dark: #256347;
  --green-accent: #00AA4C;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #3436B1, #CF2A2E);
  --gradient-warm: linear-gradient(135deg, #CF2A2E, #F47D4E);
  --gradient-cool: linear-gradient(135deg, #3436B1, #61B65D);
  --gradient-full: linear-gradient(135deg, #3436B1, #CF2A2E, #F47D4E);

  /* Surfaces */
  --bg-primary: #F5F5F7;
  --bg-alternate: #EDEDF0;
  --bg-dark: #0A0A0F;
  --bg-footer-dark: #111111;
  --bg-white: #FFFFFF;
  --bg-input-light: #F0F0F8;

  /* Text */
  --text-primary: #1A1A1A;
  --text-secondary: #333333;
  --text-muted: #888888;
  --text-placeholder: #999999;
  --text-label: #666666;
  --text-on-dark: #FFFFFF;
  --text-on-dark-secondary: #AAAAAA;

  /* UI Elements */
  --pill-bg-light: #E8E8EA;
  --pill-bg-light-hover: #D0D0D2;
  --pill-bg-dark: #1A1A1A;
  --pill-bg-dark-transparent: rgba(255, 255, 255, 0.15);
  --pill-bg-dark-subtle: rgba(255, 255, 255, 0.1);

  /* Spacing */
  --section-gap-large: clamp(60px, 8vw, 120px);
  --section-gap-medium: clamp(40px, 5vw, 80px);
  --section-gap-small: clamp(20px, 3vw, 40px);
  --page-padding: max(5vw, 40px);
  --container-max: 1536px;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --headline-massive: clamp(3rem, 10vw, 12rem);
  --headline-large: clamp(3rem, 8.5vw, 10.8rem);
  --headline-medium: clamp(2rem, 5vw, 5rem);
  --headline-small: clamp(2rem, 4vw, 4rem);
  --text-body: clamp(1rem, 1.1vw, 1.125rem);
  --text-label: 0.6875rem;
  --text-button: 0.8125rem;
  --text-copyright: 0.6875rem;

  /* Borders */
  --radius-container: 24px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-tablet: 20px;
  --radius-tablet-screen: 14px;

  /* Easing */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Transitions */
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  --transition-hover-in: 300ms;
  --transition-hover-out: 500ms;

  /* Z-index layers */
  --z-background: 0;
  --z-images: 10;
  --z-curves: 20;
  --z-content: 30;
  --z-header: 100;
  --z-overlay: 200;
}