/* ==========================================================================
   Kill Bill + Aviate Design Tokens — CSS Custom Properties
   Generated from design-system/tokens.json v3.0.0
   Source of truth: aviate-admin src/assets/main.css (@theme). Canonical blocks
   mirror it verbatim; "Kill Bill extension" blocks hold site-only values.
   ========================================================================== */

/* ==========================================================================
   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 {
  /* =======================================================================
     PRIMITIVES (canonical) — Neutral
     ======================================================================= */
  --color-neutral-0: #ffffff;
  --color-neutral-25: #f9fafb;
  --color-neutral-50: #f2f4f7;
  --color-neutral-100: #e8e9eb;
  --color-neutral-200: #d0d5dd;
  --color-neutral-300: #98a2b3;
  --color-neutral-400: #667085;
  --color-neutral-500: #475467;
  --color-neutral-600: #344054;
  --color-neutral-700: #1d2939;
  --color-neutral-800: #101828;
  --color-neutral-900: #0b0d12;

  /* =======================================================================
     PRIMITIVES (canonical) — Primary
     ======================================================================= */
  --color-primary-25: #eff4ff;
  --color-primary-50: #d1e0ff;
  --color-primary-100: #b2ccff;
  --color-primary-200: #84adff;
  --color-primary-300: #528bff;
  --color-primary-400: #2970ff;
  --color-primary-500: #155eef;
  --color-primary-600: #0040c1;
  --color-primary-700: #00359e;
  --color-primary-800: #0e2555;

  /* =======================================================================
     PRIMITIVES (canonical) — Error
     ======================================================================= */
  --color-error-25: #fef3f2;
  --color-error-50: #fee4e2;
  --color-error-100: #fecdca;
  --color-error-200: #fda29b;
  --color-error-300: #f97066;
  --color-error-400: #f04438;
  --color-error-500: #d92d20;
  --color-error-600: #b42318;
  --color-error-700: #912018;
  --color-error-800: #7a271a;

  /* =======================================================================
     PRIMITIVES (canonical) — Warning
     ======================================================================= */
  --color-warning-25: #fffaeb;
  --color-warning-50: #fef0c7;
  --color-warning-100: #fedf89;
  --color-warning-200: #fec84b;
  --color-warning-300: #fdb022;
  --color-warning-400: #f79009;
  --color-warning-500: #dc6803;
  --color-warning-600: #b54708;
  --color-warning-700: #93370d;
  --color-warning-800: #7a2e0e;

  /* =======================================================================
     PRIMITIVES (canonical) — Success
     ======================================================================= */
  --color-success-25: #ecfdf3;
  --color-success-50: #d1fadf;
  --color-success-100: #a6f4c5;
  --color-success-200: #6ce9a6;
  --color-success-300: #32d583;
  --color-success-400: #12b76a;
  --color-success-500: #039855;
  --color-success-600: #027a48;
  --color-success-700: #05603a;
  --color-success-800: #054f31;

  /* =======================================================================
     PRIMITIVES (canonical) — Purple
     ======================================================================= */
  --color-purple-25: #f4f3ff;
  --color-purple-50: #ebe9fe;
  --color-purple-100: #d9d6fe;
  --color-purple-200: #bdb4fe;
  --color-purple-300: #9b8afb;
  --color-purple-400: #7a5af8;
  --color-purple-500: #6938ef;
  --color-purple-600: #4a1fb8;
  --color-purple-700: #3e1c96;
  --color-purple-800: #181232;

  /* =======================================================================
     PRIMITIVES (Kill Bill extension) — Untitled UI indexing (25–950).
     Blue is the Kill Bill brand ramp; *-legacy hold exact values still used
     by page styles (prefer canonical primitives for new work).
     ======================================================================= */
  --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;

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

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

  --color-gray-legacy-50: #fafafa;
  --color-gray-legacy-100: #f5f5f5;
  --color-gray-legacy-200: #e9eaeb;
  --color-gray-legacy-500: #717680;
  --color-gray-legacy-600: #535862;
  --color-gray-legacy-700: #414651;
  --color-gray-legacy-900: #181d27;
  --color-gray-legacy-950: #0c111d;

  --color-purple-legacy-50: #f9f5ff;
  --color-purple-legacy-100: #f4ebff;
  --color-purple-legacy-200: #e9d7fe;
  --color-purple-legacy-300: #d6bbfb;
  --color-purple-legacy-400: #b692f6;
  --color-purple-legacy-600: #7f56d9;
  --color-purple-legacy-700: #6941c6;
  --color-purple-legacy-800: #53389e;

  --color-blue-legacy-600: #1570ef;
  --color-success-legacy-700: #067647;

  /* =======================================================================
     SEMANTIC (canonical) — each token references a primitive
     ======================================================================= */
  /* Primary */
  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-pressed: var(--color-primary-400);
  --color-on-primary: var(--color-neutral-0);

  /* Surface */
  --color-surface-container-lowest: var(--color-neutral-0);
  --color-surface-container-low: var(--color-neutral-25);
  --color-surface-container: var(--color-neutral-50);
  --color-surface-container-high: var(--color-neutral-100);

  /* On surface */
  --color-on-surface-primary: var(--color-neutral-900);
  --color-on-surface-secondary: var(--color-neutral-500);
  --color-on-surface-tertiary: var(--color-neutral-400);
  --color-on-surface-quaternary: var(--color-neutral-300);

  /* Outline */
  --color-outline-primary: var(--color-neutral-100);
  --color-outline-secondary: var(--color-neutral-200);
  --color-outline-tertiary: var(--color-neutral-300);

  /* Status */
  --color-error: var(--color-error-500);
  --color-error-hover: var(--color-error-600);
  --color-error-pressed: var(--color-error-400);
  --color-on-error: var(--color-neutral-0);
  --color-warning: var(--color-warning-500);
  --color-warning-hover: var(--color-warning-600);
  --color-warning-pressed: var(--color-warning-400);
  --color-on-warning: var(--color-neutral-0);
  --color-success: var(--color-success-500);
  --color-success-hover: var(--color-success-600);
  --color-success-pressed: var(--color-success-400);
  --color-on-success: var(--color-neutral-0);

  /* Disabled */
  --color-disable-primary: var(--color-neutral-300);
  --color-disable-secondary: var(--color-neutral-200);
  --color-disable-tertiary: var(--color-neutral-100);

  /* Tags / containers */
  --color-neutral-container: var(--color-neutral-50);
  --color-on-neutral-container: var(--color-neutral-700);
  --color-primary-container: var(--color-primary-100);
  --color-on-primary-container: var(--color-primary-700);
  --color-error-container: var(--color-error-100);
  --color-on-error-container: var(--color-error-700);
  --color-warning-container: var(--color-warning-100);
  --color-on-warning-container: var(--color-warning-700);
  --color-success-container: var(--color-success-100);
  --color-on-success-container: var(--color-success-700);
  --color-purple-container: var(--color-purple-100);
  --color-on-purple-container: var(--color-purple-700);

  /* =======================================================================
     SEMANTIC (Kill Bill extension) — same role pattern as canonical:
     <role>, <role>-hover, <role>-pressed, on-<role>.
     ======================================================================= */
  /* Brand (Kill Bill blue) — CTAs, links, Aviate + OSS actions.
     blue-700 on white and white on blue-700 both pass WCAG AA (6.3:1). */
  --color-brand: var(--color-blue-700);
  --color-brand-hover: var(--color-blue-800);
  --color-brand-pressed: var(--color-blue-900);
  --color-on-brand: var(--color-neutral-0);

  /* Inverse surfaces (dark CTA bands, footer) */
  --color-surface-inverse: var(--color-neutral-800);
  --color-on-surface-inverse: var(--color-neutral-0);

  /* Focus ring */
  --color-outline-focus: var(--color-blue-600);

  /* =======================================================================
     TYPOGRAPHY (canonical) — Font families
     ======================================================================= */
  --font-family-sans: 'Inter', sans-serif;
  --font-family-serif: 'Inter', sans-serif;
  --font-family-mono: 'Inter', monospace;
  --font-product: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Kill Bill extension: display face for H1–H3, code face for snippets */
  --font-family-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-family-code: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* =======================================================================
     TYPOGRAPHY (canonical) — Font weight
     ======================================================================= */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  /* Kill Bill extension */
  --font-weight-bold: 700;

  /* =======================================================================
     TYPOGRAPHY (canonical) — Font size; Kill Bill extension steps marked *
     ======================================================================= */
  --font-size-10: 0.625rem;
  --font-size-11: 0.6875rem;  /* * */
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;  /* * */
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;  /* * */
  --font-size-16: 1rem;
  --font-size-17: 1.0625rem;  /* * */
  --font-size-18: 1.125rem;   /* * */
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;   /* * */
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;   /* * */
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;    /* * */
  --font-size-40: 2.5rem;
  --font-size-48: 3rem;
  --font-size-56: 3.5rem;
  --font-size-60: 3.75rem;    /* * */
  --font-size-72: 4.5rem;     /* * */

  /* =======================================================================
     TYPOGRAPHY (canonical) — Line height; Kill Bill extension steps marked *
     ======================================================================= */
  --line-height-12: 0.75rem;
  --line-height-16: 1rem;
  --line-height-18: 1.125rem; /* * */
  --line-height-20: 1.25rem;
  --line-height-22: 1.375rem;
  --line-height-24: 1.5rem;   /* * */
  --line-height-26: 1.625rem;
  --line-height-28: 1.75rem;  /* * */
  --line-height-30: 1.875rem;
  --line-height-32: 2rem;     /* * */
  --line-height-36: 2.25rem;
  --line-height-38: 2.375rem; /* * */
  --line-height-40: 2.5rem;
  --line-height-44: 2.75rem;  /* * */
  --line-height-50: 3.125rem;
  --line-height-60: 3.75rem;
  --line-height-70: 4.375rem;
  --line-height-72: 4.5rem;   /* * */
  --line-height-90: 5.625rem; /* * */

  /* Kill Bill extension: letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;

  /* =======================================================================
     TYPOGRAPHY (canonical) — Text styles (size + --line-height + --font-weight)
     ======================================================================= */
  --text-display-large: var(--font-size-56);
  --text-display-large--line-height: var(--line-height-70);
  --text-display-large--font-weight: var(--font-weight-semibold);
  --text-display-medium: var(--font-size-48);
  --text-display-medium--line-height: var(--line-height-60);
  --text-display-medium--font-weight: var(--font-weight-semibold);
  --text-display-small: var(--font-size-40);
  --text-display-small--line-height: var(--line-height-50);
  --text-display-small--font-weight: var(--font-weight-semibold);

  --text-headline-large: var(--font-size-32);
  --text-headline-large--line-height: var(--line-height-40);
  --text-headline-large--font-weight: var(--font-weight-semibold);
  --text-headline-medium: var(--font-size-28);
  --text-headline-medium--line-height: var(--line-height-36);
  --text-headline-medium--font-weight: var(--font-weight-semibold);
  --text-headline-small: var(--font-size-24);
  --text-headline-small--line-height: var(--line-height-30);
  --text-headline-small--font-weight: var(--font-weight-semibold);

  --text-title-large: var(--font-size-20);
  --text-title-large--line-height: var(--line-height-26);
  --text-title-large--font-weight: var(--font-weight-medium);
  --text-title-medium: var(--font-size-16);
  --text-title-medium--line-height: var(--line-height-22);
  --text-title-medium--font-weight: var(--font-weight-medium);
  --text-title-small: var(--font-size-14);
  --text-title-small--line-height: var(--line-height-20);
  --text-title-small--font-weight: var(--font-weight-medium);

  --text-body-large: var(--font-size-16);
  --text-body-large--line-height: var(--line-height-22);
  --text-body-large--font-weight: var(--font-weight-regular);
  --text-body-medium: var(--font-size-14);
  --text-body-medium--line-height: var(--line-height-20);
  --text-body-medium--font-weight: var(--font-weight-regular);
  --text-body-small: var(--font-size-12);
  --text-body-small--line-height: var(--line-height-16);
  --text-body-small--font-weight: var(--font-weight-regular);

  --text-label-large-emphasis: var(--font-size-14);
  --text-label-large-emphasis--line-height: var(--line-height-20);
  --text-label-large-emphasis--font-weight: var(--font-weight-semibold);
  --text-label-large: var(--font-size-14);
  --text-label-large--line-height: var(--line-height-20);
  --text-label-large--font-weight: var(--font-weight-medium);
  --text-label-medium: var(--font-size-12);
  --text-label-medium--line-height: var(--line-height-16);
  --text-label-medium--font-weight: var(--font-weight-medium);
  --text-label-small: var(--font-size-10);
  --text-label-small--line-height: var(--line-height-12);
  --text-label-small--font-weight: var(--font-weight-medium);

  /* =======================================================================
     SPACING (Kill Bill extension)
     ======================================================================= */
  --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 (Kill Bill extension)
     ======================================================================= */
  --container-sm: 48rem;   /* 768px */
  --container-md: 64rem;   /* 1024px */
  --container-lg: 80rem;   /* 1280px */
  --container-xlg: 90rem;  /* 1440px */

  /* =======================================================================
     RADIUS (Aviate Figma: 4 / 6 / 12 / 16 / 20 / 24 / pill)
     ======================================================================= */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-pill: 999px;

  /* =======================================================================
     ELEVATION: Shadows (Kill Bill extension)
     ======================================================================= */
  --shadow-xs: 0 1px 2px 0 color-mix(in srgb, var(--color-neutral-800) 5%, transparent);
  --shadow-sm:
    0 1px 3px 0 color-mix(in srgb, var(--color-neutral-800) 10%, transparent),
    0 1px 2px -1px color-mix(in srgb, var(--color-neutral-800) 10%, transparent);
  --shadow-md:
    0 4px 6px -1px color-mix(in srgb, var(--color-neutral-800) 10%, transparent),
    0 2px 4px -2px color-mix(in srgb, var(--color-neutral-800) 10%, transparent);
  --shadow-lg:
    0 10px 15px -3px color-mix(in srgb, var(--color-neutral-800) 10%, transparent),
    0 4px 6px -4px color-mix(in srgb, var(--color-neutral-800) 10%, transparent);
  --shadow-xl:
    0 20px 25px -5px color-mix(in srgb, var(--color-neutral-800) 10%, transparent),
    0 8px 10px -6px color-mix(in srgb, var(--color-neutral-800) 10%, transparent);
  --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--color-neutral-800) 25%, transparent);

  /* Elevation (Aviate landing Figma drop shadows) */
  --shadow-tile-sm: 0 2px 2.5px rgb(0 0 0 / 9%), 0 0 1px rgb(0 0 0 / 12%);
  --shadow-tile: 0 0 2px rgb(0 0 0 / 12%), 0 2px 5px rgb(0 0 0 / 9%);
  --shadow-raised: 0 4px 13px rgb(0 0 0 / 8%), 0 0 4px rgb(0 0 0 / 6%);
  --shadow-badge: 0 8px 24px rgb(15 23 41 / 10%), 0 0 1px rgb(0 0 0 / 6%);
  --shadow-overlay-dark: 0 24px 48px -12px rgb(0 0 0 / 60%);

  /* Kill Bill extensions */
  --shadow-card: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
  --shadow-menu: 0 24px 48px -12px rgb(15 23 41 / 12%), 0 2px 6px rgb(15 23 41 / 5%);

  /* =======================================================================
     TRANSITIONS (Kill Bill extension)
     ======================================================================= */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}