/* ==========================================================================
   Kill Bill + Aviate Design Tokens — CSS Custom Properties
   Generated from design-system/tokens.json v1.0.0
   ========================================================================== */

/* ==========================================================================
   FONT FACE: Space Grotesk (Display Font)
   Variable font — supports weights 300–700
   ========================================================================== */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2'),
       url('../fonts/SpaceGrotesk-Variable.woff') format('woff');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =======================================================================
     COLORS: Base
     ======================================================================= */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* =======================================================================
     COLORS: Gray
     ======================================================================= */
  --color-gray-25: #FCFCFD;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F2F4F7;
  --color-gray-200: #EAECF0;
  --color-gray-300: #D0D5DD;
  --color-gray-400: #98A2B3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #1D2939;
  --color-gray-900: #101828;

  /* =======================================================================
     COLORS: Blue (OSS accent — Kill Bill open-source, Kaui, community)
     ======================================================================= */
  --color-blue-25: #F5FAFF;
  --color-blue-50: #EFF8FF;
  --color-blue-100: #D1E9FF;
  --color-blue-200: #B2DDFF;
  --color-blue-300: #84CAFF;
  --color-blue-400: #53B1FD;
  --color-blue-500: #2E90FA;
  --color-blue-600: #2970FF;
  --color-blue-700: #175CD3;
  --color-blue-800: #1849A9;
  --color-blue-900: #194185;

  /* =======================================================================
     COLORS: Primary / Purple (Premium accent — Aviate, Enterprise, paid)
     ======================================================================= */
  --color-primary-25: #FCFAFF;
  --color-primary-50: #F9F5FF;
  --color-primary-100: #F4EBFF;
  --color-primary-200: #E9D7FE;
  --color-primary-300: #D6BBFB;
  --color-primary-400: #B692F6;
  --color-primary-500: #9E77ED;
  --color-primary-600: #7F56D9;
  --color-primary-700: #6941C6;
  --color-primary-800: #53389E;
  --color-primary-900: #42307D;

  /* =======================================================================
     COLORS: Error
     ======================================================================= */
  --color-error-25: #FFFBFA;
  --color-error-50: #FEF3F2;
  --color-error-100: #FEE4E2;
  --color-error-200: #FECDCA;
  --color-error-300: #FDA29B;
  --color-error-400: #F97066;
  --color-error-500: #F04438;
  --color-error-600: #D92D20;
  --color-error-700: #B42318;
  --color-error-800: #912018;
  --color-error-900: #7A271A;

  /* =======================================================================
     COLORS: Warning
     ======================================================================= */
  --color-warning-25: #FFFCF5;
  --color-warning-50: #FFFAEB;
  --color-warning-100: #FEF0C7;
  --color-warning-200: #FEDF89;
  --color-warning-300: #FEC84B;
  --color-warning-400: #FDB022;
  --color-warning-500: #F79009;
  --color-warning-600: #DC6803;
  --color-warning-700: #B54708;
  --color-warning-800: #93370D;
  --color-warning-900: #7A2E0E;

  /* =======================================================================
     COLORS: Success
     ======================================================================= */
  --color-success-25: #F6FEF9;
  --color-success-50: #ECFDF3;
  --color-success-100: #D1FADF;
  --color-success-200: #A6F4C5;
  --color-success-300: #6CE9A6;
  --color-success-400: #32D583;
  --color-success-500: #12B76A;
  --color-success-600: #039855;
  --color-success-700: #027A48;
  --color-success-800: #05603A;
  --color-success-900: #054F31;

  /* =======================================================================
     COLORS: Secondary — Teal
     ======================================================================= */
  --color-teal-25: #F6FEFC;
  --color-teal-50: #F0FDF9;
  --color-teal-100: #CCFBEF;
  --color-teal-200: #99F6E0;
  --color-teal-300: #5FE9D0;
  --color-teal-400: #2ED3B7;
  --color-teal-500: #15B79E;
  --color-teal-600: #0E9384;
  --color-teal-700: #107569;
  --color-teal-800: #125D56;
  --color-teal-900: #134E48;

  /* =======================================================================
     COLORS: Secondary — Gray Blue
     ======================================================================= */
  --color-gray-blue-25: #FCFCFD;
  --color-gray-blue-50: #F8F9FC;
  --color-gray-blue-100: #EAECF5;
  --color-gray-blue-200: #D5D9EB;
  --color-gray-blue-300: #B3B8DB;
  --color-gray-blue-400: #717BBC;
  --color-gray-blue-500: #4E5BA6;
  --color-gray-blue-600: #3E4784;
  --color-gray-blue-700: #363F72;
  --color-gray-blue-800: #293056;
  --color-gray-blue-900: #101323;

  /* =======================================================================
     COLORS: Secondary — Purple
     ======================================================================= */
  --color-secondary-purple-25: #FAFAFF;
  --color-secondary-purple-50: #F4F3FF;
  --color-secondary-purple-100: #EBE9FE;
  --color-secondary-purple-200: #D9D6FE;
  --color-secondary-purple-300: #BDB4FE;
  --color-secondary-purple-400: #9B8AFB;
  --color-secondary-purple-500: #7A5AF8;
  --color-secondary-purple-600: #6938EF;
  --color-secondary-purple-700: #4A1FB8;
  --color-secondary-purple-800: #3E1C96;
  --color-secondary-purple-900: #181232;

  /* =======================================================================
     SEMANTIC: Text
     ======================================================================= */
  --text-default: var(--color-gray-900);
  --text-muted: var(--color-gray-600);
  --text-subtle: var(--color-gray-500);
  --text-on-dark: var(--color-gray-blue-200);
  --text-inverse: var(--color-white);

  /* =======================================================================
     SEMANTIC: Background
     ======================================================================= */
  --bg-canvas: var(--color-white);
  --bg-subtle: var(--color-gray-25);
  --bg-muted: var(--color-gray-50);
  --bg-inverse: var(--color-gray-900);

  /* Surface: Blue-tinted backgrounds for cards, menus, accent areas */
  --surface-blue: #f0f5ff;
  --surface-blue-light: var(--color-blue-25);
  --surface-blue-border: #e5edfd;

  /* Section gradient start colors */
  --bg-section-gradient: #f3f7fc;

  /* =======================================================================
     SEMANTIC: Border
     ======================================================================= */
  --border-default: var(--color-gray-200);
  --border-muted: var(--color-gray-100);
  --border-subtle: var(--color-gray-100);
  --border-strong: var(--color-gray-300);
  --border-focus: var(--color-primary-600);

  /* =======================================================================
     SEMANTIC: Links
     ======================================================================= */
  --link-default: var(--color-blue-600);
  --link-hover: var(--color-blue-700);
  --link-visited: var(--color-blue-700);

  /* =======================================================================
     SEMANTIC: Actions — OSS (Blue)
     Kill Bill open-source features, Kaui, community, general CTAs
     ======================================================================= */
  --action-oss-default: var(--color-blue-600);
  --action-oss-hover: var(--color-blue-700);
  --action-oss-active: var(--color-blue-800);

  /* =======================================================================
     SEMANTIC: Actions — Premium (Purple)
     Aviate, Enterprise support, premium pricing, paid features
     ======================================================================= */
  --action-premium-default: var(--color-primary-600);
  --action-premium-hover: var(--color-primary-700);
  --action-premium-active: var(--color-primary-800);

  /* =======================================================================
     SEMANTIC: Actions — Secondary
     ======================================================================= */
  --action-secondary-default: var(--color-gray-900);
  --action-secondary-hover: var(--color-gray-800);
  --action-secondary-active: var(--color-gray-700);

  /* =======================================================================
     SEMANTIC: Actions — Danger
     ======================================================================= */
  --action-danger-default: var(--color-error-600);
  --action-danger-hover: var(--color-error-700);
  --action-danger-active: var(--color-error-800);

  /* =======================================================================
     SEMANTIC: Action text (shared)
     ======================================================================= */
  --action-text: var(--color-white);

  /* =======================================================================
     SEMANTIC: Status
     ======================================================================= */
  --status-success: var(--color-success-600);
  --status-warning: var(--color-warning-600);
  --status-error: var(--color-error-600);
  --status-info: var(--color-gray-blue-500);

  /* =======================================================================
     TYPOGRAPHY: Font Families
     ======================================================================= */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* =======================================================================
     TYPOGRAPHY: Heading Sizes
     ======================================================================= */
  --text-h1: 4.5rem;       /* 72px */
  --lh-h1: 5.625rem;       /* 90px */
  --text-h2: 3.75rem;      /* 60px */
  --lh-h2: 4.5rem;         /* 72px */
  --text-h3: 3rem;         /* 48px */
  --lh-h3: 3.75rem;        /* 60px */
  --text-h4: 2.25rem;      /* 36px */
  --lh-h4: 2.75rem;        /* 44px */
  --text-h5: 1.875rem;     /* 30px */
  --lh-h5: 2.375rem;       /* 38px */
  --text-h6: 1.5rem;       /* 24px */
  --lh-h6: 2rem;           /* 32px */

  /* =======================================================================
     TYPOGRAPHY: Body Text Sizes
     ======================================================================= */
  --text-20: 1.25rem;      /* 20px */
  --lh-20: 1.875rem;       /* 30px */
  --text-18: 1.125rem;     /* 18px */
  --lh-18: 1.75rem;        /* 28px */
  --text-16: 1rem;         /* 16px */
  --lh-16: 1.5rem;         /* 24px */
  --text-14: 0.875rem;     /* 14px */
  --lh-14: 1.25rem;        /* 20px */
  --text-12: 0.75rem;      /* 12px */
  --lh-12: 1.125rem;       /* 18px */

  /* =======================================================================
     TYPOGRAPHY: Letter Spacing
     ======================================================================= */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;

  /* =======================================================================
     TYPOGRAPHY: Font Weights
     ======================================================================= */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* =======================================================================
     SPACING
     ======================================================================= */
  --space-4xs: 0.25rem;    /* 4px */
  --space-3xs: 0.5rem;     /* 8px */
  --space-2xs: 0.75rem;    /* 12px */
  --space-xs: 1rem;        /* 16px */
  --space-sm: 1.25rem;     /* 20px */
  --space-md: 1.5rem;      /* 24px */
  --space-lg: 2rem;        /* 32px */
  --space-xl: 2.5rem;      /* 40px */
  --space-2xl: 3rem;       /* 48px */
  --space-3xl: 4rem;       /* 64px */
  --space-4xl: 5rem;       /* 80px */
  --space-5xl: 6rem;       /* 96px */

  /* =======================================================================
     LAYOUT: Containers
     ======================================================================= */
  --container-xs: 40rem;   /* 640px */
  --container-sm: 48rem;   /* 768px */
  --container-md: 64rem;   /* 1024px */
  --container-lg: 80rem;   /* 1280px */
  --container-xlg: 90rem;  /* 1440px */

  /* =======================================================================
     ELEVATION: Shadows
     ======================================================================= */
  --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px -1px rgba(16, 24, 40, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -4px rgba(16, 24, 40, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(16, 24, 40, 0.1), 0 8px 10px -6px rgba(16, 24, 40, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(16, 24, 40, 0.25);
  --shadow-3xl: 0 35px 60px -15px rgba(16, 24, 40, 0.3);

  /* =======================================================================
     TRANSITIONS
     ======================================================================= */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-spring: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}