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

   Structural tokens for the design system.
   Theme-specific values come from theme-polly.css
   (or another theme file) via --theme-* variables.

   Load order: tokens.css → layout.css → typography.css
               → components.css → animations.css → theme-*.css
   ============================================ */

:root {
  /* Primary Colors — wired to theme */
  --color-primary: var(--theme-primary, #5747f8);
  --color-primary-hover: var(--theme-primary-hover, #4636e0);

  /* Gradient Colors */
  --color-gradient-start: #5747f8;
  --color-gradient-end: #00baf1;

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

  /* Background & Surface */
  --color-background: #FAFBFC;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F7FAFC;

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

  /* Disabled State */
  --color-disabled: #E2E8F0;

  /* Danger / Error */
  --color-danger: #C53030;
  --color-danger-bg: #FFF5F5;
  --color-danger-border: #FEB2B2;

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

  /* Interaction States — Light-blue tints (accent #00baf1 pre-mixed on white) */
  --color-hover-tint: #F0FBFE;
  --color-selected-tint: #E6F8FE;
  --color-selected-hover-tint: #DBF5FD;

  /* Focus States — wired to theme */
  --color-focus: var(--theme-primary-focus, rgba(87, 71, 248, 0.15));

  /* Shadows — soft and diffuse for "floating" effect */
  --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(--theme-gradient-shadow, rgba(87, 71, 248, 0.25));
  --shadow-button-hover: 0 6px 20px var(--theme-gradient-shadow-hover, rgba(87, 71, 248, 0.35));

  /* 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-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;

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

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

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

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