/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');

/* Design Tokens - Generated from Keepnet-styles.json */
:root {
  /* Brand Colors */
  --kn-color-primary-neon: #ccff00;
  --kn-color-purple-pastel: #c7b7ff;
  --kn-color-teal-pastel: #2aa1b1;
  --kn-color-dark-teal-pastel: #00637a;
  --kn-color-danger-red: #fc5555;
  
  /* Backgrounds */
  --kn-bg-dark: #0e0e0f;
  --kn-bg-secondary: #2a2a2b;
  --kn-bg-card: #3a3b3d;
  
  /* Content/Text Colors */
  --kn-text-primary: #ffffff;
  --kn-text-secondary: #aeb7bf;
  --kn-text-muted: rgba(255, 255, 255, 0.75);
  --kn-text-on-fill: #ffffff;
  --kn-text-on-light: #000000;
  --kn-text-neon: #ccff00;
  --kn-text-disabled: #3e3e3e;
  
  /* Fills */
  --kn-fill-neutral: #3a3b3d;
  --kn-fill-secondary: #3a3b3d;
  --kn-fill-muted: rgba(255, 255, 255, 0.24);
  
  /* RGB values for rgba usage */
  --kn-bg-dark-rgb: 14, 14, 15;
  --kn-neon-rgb: 204, 255, 0;
  --kn-purple-rgb: 199, 183, 255;
  
  /* Typography - Inter font family */
  --kn-font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --kn-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  
  /* Font Sizes - From design system */
  --kn-font-size-xs: 0.75rem;     /* 12px - Caption */
  --kn-font-size-sm: 0.875rem;    /* 14px - Subheading/Button */
  --kn-font-size-base: 1rem;      /* 16px - Body */
  --kn-font-size-lg: 1.25rem;     /* 20px - Heading */
  --kn-font-size-xl: 1.5rem;      /* 24px - Subtitle */
  --kn-font-size-2xl: 2rem;       /* 32px - Large Title */
  --kn-font-size-3xl: 2.5rem;     /* 40px */
  --kn-font-size-4xl: 3rem;       /* 48px */
  --kn-font-size-5xl: 3.5rem;     /* 56px - XL Title */
  
  /* Font Weights - From design system */
  --kn-font-weight-medium: 500;
  --kn-font-weight-bold: 700;
  --kn-font-weight-black: 900;
  
  /* Line Heights - From design system */
  --kn-line-height-tight: 1;
  --kn-line-height-normal: 1.2;
  --kn-line-height-relaxed: 1.5;
  
  /* Text Styles */
  --kn-text-xl-title: 900 3.5rem/1 var(--kn-font-heading);
  --kn-text-large-title: 900 2rem/1.2 var(--kn-font-heading);
  --kn-text-subtitle: 700 1.5rem/1.5 var(--kn-font-heading);
  --kn-text-heading: 900 1.25rem/1 var(--kn-font-heading);
  --kn-text-body: 500 1rem/1.3 var(--kn-font-base);
  --kn-text-body-emphasised: 900 1rem/1.375 var(--kn-font-base);
  --kn-text-subheading: 500 0.875rem/1.2 var(--kn-font-base);
  --kn-text-subheading-emphasised: 900 0.875rem/1.571 var(--kn-font-base);
  --kn-text-button: 900 0.875rem/1.2 var(--kn-font-base);
  --kn-text-caption-emphasised: 700 0.75rem/1 var(--kn-font-base);
  
  /* Letter Spacing */
  --kn-letter-spacing-tight: -0.5px;
  --kn-letter-spacing-normal: 0px;
  --kn-letter-spacing-wide: 1px;
  
  /* Spacing Scale */
  --kn-spacing-zero: 0;
  --kn-spacing-xs: 0.5rem;      /* 8px - Small */
  --kn-spacing-sm: 0.5rem;      /* 8px - Small */
  --kn-spacing-md: 1rem;        /* 16px - Medium */
  --kn-spacing-lg: 1.5rem;      /* 24px - Large */
  --kn-spacing-xl: 2rem;        /* 32px - XL */
  --kn-spacing-2xl: 2.5rem;     /* 40px - XXL */
  
  /* Border Radius - Using medium spacing as base */
  --kn-radius-sm: 0.5rem;       /* 8px */
  --kn-radius-md: 0.75rem;      /* 12px */
  --kn-radius-lg: 1rem;         /* 16px */
  --kn-radius-xl: 1.25rem;      /* 20px */
  --kn-radius-2xl: 1.5rem;      /* 24px */
  
  /* Effect Styles - Solid shadows from design system */
  --kn-shadow-neon-tile: 0px 4px 0px 0px #9bc200;
  --kn-shadow-purple-tile: 0px 4px 0px 0px #9070ff;
  --kn-shadow-neutral-tile: 0px 4px 0px 0px #1e1e1f;
  --kn-shadow-teal-tile: 0px 4px 0px 0px #016b83;
  --kn-shadow-disabled-tile: 0px 4px 0px 0px #1f1f20;
  --kn-shadow-primary-button: 0px 4px 0px 0px #9bc200;
  --kn-shadow-secondary-button: 0px 4px 0px 0px #2e2f31;
  
  /* Soft shadows for cards */
  --kn-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  --kn-shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
  --kn-shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
  --kn-shadow-xl: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
  
  /* Neon glow effect */
  --kn-shadow-glow-neon: 0 0 20px rgba(204, 255, 0, 0.4);
  --kn-shadow-glow-purple: 0 0 20px rgba(199, 183, 255, 0.4);
}