/* Telluna design tokens */

@property --fill {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  color-scheme: light;

  --bg: #FFFFFF;
  --bg-soft: #F6F2FF;
  --bg-gradient: linear-gradient(160deg, #EFE9FB 0%, #F6F2FF 40%, #FBF7FF 100%);

  --ink: #1C1533;
  --ink-2: #4B4463;
  --ink-3: #8A83A0;

  --violet: #6D28D9;
  --violet-2: #7C3AED;
  --violet-ink: #3A1D7A;
  --violet-soft: #F3EEFC;
  --violet-bg: #EFE9FB;

  --line: #E9E2F7;
  --card: #FFFFFF;

  --gold: #E0A422;
  --gold-bg: #FBF3DE;
  --gold-border: #F0DEB0;

  --green: #3E9E6E;
  --green-bg: #EAF6F0;
  --green-border: #CBEAD9;

  --hero-from: #2A1758;
  --hero-mid: #4A1D9E;
  --hero-to: #6D28D9;

  --shadow: 0 6px 24px rgba(76, 29, 149, 0.08);
  --shadow-lg: 0 14px 40px rgba(76, 29, 149, 0.16);
  --shadow-btn: 0 8px 22px rgba(109, 40, 217, 0.45);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Lexend Deca', var(--font-body);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 30px;
  --radius-full: 50%;

  --nav-height: 76px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 0.15s;
  --dur-normal: 0.28s;
  --dur-sheet: 0.34s;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}