/* ============================================
   Design Tokens
   ============================================ */

:root {
  /* Primary Colors */
  --color-primary: #3a6ef5;
  --color-primary-hover: #2d5ee0;
  --color-primary-text: #2d5ee0;
  --color-primary-fill: #2d5ee0;
  --color-on-primary-fill: #FFFFFF;

  /* Gradient Colors */
  --color-gradient-start: #5747f8;
  --color-gradient-end: #00baf1;
  --color-gradient-primary: linear-gradient(91deg, var(--color-gradient-start), var(--color-gradient-end));
  --color-gradient-shadow: rgba(87, 71, 248, 0.25);
  --color-gradient-shadow-hover: rgba(87, 71, 248, 0.35);

  /* Accent Colors */
  --color-accent: #00baf1;
  --color-accent-light: #7dd8f7;

  /* Background & Surface */
  --color-background: #f7f8fa;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F7FAFC;
  --color-app-background: var(--color-background);

  /* Aurora Background Blobs */
  --color-aurora-1: rgba(87, 71, 248, 0.08);
  --color-aurora-2: rgba(0, 186, 241, 0.07);
  --color-aurora-3: rgba(58, 110, 245, 0.06);
  --color-aurora-4: rgba(0, 186, 241, 0.05);
  --color-aurora-5: rgba(87, 71, 248, 0.05);

  /* Input Borders */
  --color-input-border: #d8dee8;
  --color-input-border-hover: #c0c8d4;

  /* Logo */
  --logo-url: url('/logos/Polly_Logo_Gradient_RGB.svg');

  /* Hero image */
  --hero-url: url('/images/Polly_Welcome_Hero.png');

  /* Borders */
  --color-border: #E2E8F0;
  --color-border-light: #EDF2F7;

  /* Disabled State */
  --color-disabled: #E2E8F0;
  --color-button-disabled-text: #c1c9d4;
  --color-button-disabled-border: #dde2ea;

  /* Danger / Error */
  --color-danger: #C53030;
  --color-danger-text: #9B2C2C;
  --color-danger-bg: #FFF5F5;
  --color-danger-bg-dark: #FED7D7;
  --color-danger-border: #FEB2B2;

  /* Success */
  --color-success: #276749;
  --color-success-bg: #F0FFF4;
  --color-success-border: #9AE6B4;

  /* Text */
  --color-text: #1A202C;
  --color-text-muted: rgba(26, 32, 44, 0.7);
  --color-text-placeholder: rgba(26, 32, 44, 0.55);
  --color-text-disabled: #6e727a;
  --color-text-inverse: #FFFFFF;

  /* Interaction States */
  --color-hover-tint: #F0FBFE;
  --color-selected-tint: #E6F8FE;
  --color-selected-hover-tint: #DBF5FD;

  /* Focus States */
  --color-focus: rgba(58, 110, 245, 0.12);

  /* Footer Neutrals */
  --color-footer-text: #686f7e;
  --color-footer-text-hover: #5a6478;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 6px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-card-selected: 0 0 0 2px rgba(87, 71, 248, 0.2), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-button: 0 4px 14px var(--color-gradient-shadow);
  --shadow-button-hover: 0 6px 20px var(--color-gradient-shadow-hover);

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

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-family-ui: 'Work Sans', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 4rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Spacing Scale */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;

  --max-content-width: 745px;
}

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

html {
  height: 100vh;
  width: 100vw;
}