@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Design tokens adapted from design-system/appgenie-ds/colors_and_type.css */

:root {
  --genie-50: #E5F7FF;
  --genie-100: #C5EEFF;
  --genie-200: #8BDDFF;
  --genie-300: #4DC8FE;
  --genie-400: #1FB7FF;
  --genie-500: #0CAFFE;
  --genie-600: #008CD9;
  --genie-700: #006CA8;
  --genie-800: #07527E;
  --genie-900: #0A3654;

  --lamp-50: #F2EEFE;
  --lamp-100: #E3DBFD;
  --lamp-200: #C5B3FB;
  --lamp-300: #9F7DF6;
  --lamp-400: #7B4DEF;
  --lamp-500: #5B2BE0;
  --lamp-600: #4318C3;
  --lamp-700: #3A1B9E;
  --lamp-800: #2A1373;
  --lamp-900: #1A0B4D;

  --gold-50: #FFF8E1;
  --gold-100: #FFEEB3;
  --gold-300: #FACF5A;
  --gold-500: #F4C842;
  --gold-600: #D9A91F;
  --gold-700: #A77E0A;

  --mint-50: #E6FBF3;
  --mint-100: #C2F4DF;
  --mint-300: #6BDDB3;
  --mint-500: #29C49A;
  --mint-600: #15A37C;
  --mint-700: #0E7A5C;

  --ink-0: #FFFFFF;
  --ink-25: #FBFBFE;
  --ink-50: #F4F5FB;
  --ink-100: #E7E9F2;
  --ink-200: #D2D6E4;
  --ink-300: #ADB3C7;
  --ink-400: #7C84A1;
  --ink-500: #5B6280;
  --ink-600: #3D4565;
  --ink-700: #232A48;
  --ink-800: #161B33;
  --ink-900: #0E1129;

  --bg: var(--ink-25);
  --bg-elev: var(--ink-0);
  --bg-muted: var(--ink-50);
  --bg-inverted: var(--ink-900);

  --fg-1: var(--ink-800);
  --fg-2: var(--ink-500);
  --fg-3: var(--ink-400);
  --fg-inverted: var(--ink-0);
  --fg-on-genie: var(--ink-900);
  --fg-on-lamp: var(--ink-0);

  --accent: var(--genie-500);
  --accent-hover: var(--genie-600);
  --accent-press: var(--genie-700);
  --accent-soft-bg: var(--genie-50);
  /* Inline / body links on white: darker than --accent for readability (help text, views, small). */
  --accent-link: var(--genie-700);
  --accent-link-hover: var(--genie-800);

  --magic: var(--lamp-500);
  --magic-soft-bg: var(--lamp-50);

  --success: var(--mint-600);
  --success-soft-bg: var(--mint-50);
  --warning: var(--gold-600);
  --warning-soft-bg: var(--gold-50);
  --danger: #E04444;
  --danger-soft-bg: #FDECEC;

  --border: var(--ink-100);
  --border-strong: var(--ink-200);
  --focus-ring: color-mix(in srgb, var(--genie-500) 35%, transparent);

  --font-display: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(14, 17, 41, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 17, 41, 0.06), 0 1px 2px rgba(14, 17, 41, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(12, 175, 254, 0.22), 0 2px 6px rgba(14, 17, 41, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(12, 175, 254, 0.28), 0 4px 12px rgba(14, 17, 41, 0.06);
  --shadow-glow: 0 0 0 4px var(--focus-ring);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 320ms;

  --grad-aladdin: linear-gradient(135deg, #0CAFFE 0%, #5B2BE0 60%, #3A1B9E 100%);
  --grad-aurora: radial-gradient(120% 80% at 20% 0%, #4DC8FE 0%, #5B2BE0 45%, #1A0B4D 100%);
  --grad-glow: radial-gradient(50% 50% at 50% 50%, rgba(12, 175, 254, 0.45) 0%, rgba(12, 175, 254, 0) 70%);
}