/*
 * Busso color system — generated file. Do not edit manually.
 * Source: ds/colors/tokens/source.cjs
 *
 * Components consume semantic --color-* and composite --shadow-* tokens only.
 * Primitive --palette-* tokens are private to this file.
 */

:root {
  color-scheme: light;

  /* Neutral palette */
  --palette-neutral-0: #ffffff;
  --palette-neutral-25: #fcfeff;
  --palette-neutral-50: #f8fafc;
  --palette-neutral-100: #eef2f5;
  --palette-neutral-200: #dae1e7;
  --palette-neutral-300: #bec7ce;
  --palette-neutral-400: #96a0a9;
  --palette-neutral-500: #727c85;
  --palette-neutral-600: #565f67;
  --palette-neutral-700: #3c434a;
  --palette-neutral-800: #262c31;
  --palette-neutral-900: #151a1e;
  --palette-neutral-950: #080b0d;

  /* Brand palette */
  --palette-brand-50: #f1f8ff;
  --palette-brand-100: #ddedfd;
  --palette-brand-200: #bbd8f4;
  --palette-brand-300: #8fbde7;
  --palette-brand-400: #5d9bd2;
  --palette-brand-500: #347cb9;
  --palette-brand-600: #20649b;
  --palette-brand-700: #154e7a;
  --palette-brand-800: #0e3859;
  --palette-brand-900: #0b253a;
  --palette-brand-950: #051421;

  /* Success palette */
  --palette-success-50: #eaf7f1;
  --palette-success-300: #76c7a6;
  --palette-success-600: #287a5d;
  --palette-success-dark-surface: #102b22;

  /* Warning palette */
  --palette-warning-50: #fff7e6;
  --palette-warning-300: #e6bd66;
  --palette-warning-700: #966812;
  --palette-warning-dark-surface: #30240e;

  /* Danger palette */
  --palette-danger-50: #fceeee;
  --palette-danger-300: #e4a0a0;
  --palette-danger-600: #a33d3d;
  --palette-danger-700: #873333;
  --palette-danger-dark-surface: #35191b;

  /* Protected external brand */
  --palette-telegram: #2aabee;

  /* Reusable opacity decisions */
  --opacity-glass: 90%;
  --opacity-glass-strong: 94%;
  --opacity-scrim: 68%;
  --opacity-scrim-strong: 82%;
  --opacity-disabled: 40%;

  /* Page and surfaces */
  --color-background-page: var(--palette-neutral-25);
  --color-background-section: var(--palette-neutral-50);
  --color-surface-default: var(--palette-neutral-0);
  --color-surface-subtle: var(--palette-neutral-50);
  --color-surface-muted: var(--palette-neutral-100);
  --color-surface-raised: var(--palette-neutral-0);
  --color-surface-inverse: var(--palette-neutral-900);
  --color-surface-inverse-subtle: color-mix(in srgb, var(--palette-neutral-0) 6%, transparent);
  --color-surface-glass: color-mix(in srgb, var(--palette-neutral-0) var(--opacity-glass), transparent);
  --color-surface-glass-strong: color-mix(in srgb, var(--palette-neutral-0) var(--opacity-glass-strong), transparent);
  --color-surface-brand-subtle: var(--palette-brand-50);
  --color-surface-brand-subtle-hover: var(--palette-brand-100);
  --color-surface-overlay: var(--color-surface-glass-strong);

  /* Modal and navigation overlays */
  --color-overlay-scrim: color-mix(in srgb, var(--palette-neutral-950) var(--opacity-scrim), transparent);
  --color-overlay-scrim-strong: color-mix(in srgb, var(--palette-neutral-950) var(--opacity-scrim-strong), transparent);

  /* Content */
  --color-text-primary: var(--palette-neutral-900);
  --color-text-secondary: var(--palette-neutral-600);
  --color-text-tertiary: var(--palette-neutral-500);
  --color-text-disabled: var(--palette-neutral-400);
  --color-text-inverse: var(--palette-neutral-25);
  --color-text-inverse-secondary: var(--palette-neutral-300);
  --color-text-link: var(--palette-brand-600);
  --color-text-link-hover: var(--palette-brand-700);

  /* Borders */
  --color-border-subtle: var(--palette-neutral-200);
  --color-border-default: var(--palette-neutral-300);
  --color-border-strong: var(--palette-neutral-500);
  --color-border-inverse-subtle: color-mix(in srgb, var(--color-text-inverse) 14%, transparent);
  --color-border-inverse-default: color-mix(in srgb, var(--color-text-inverse) 24%, transparent);
  --color-border-inverse-strong: color-mix(in srgb, var(--color-text-inverse) 36%, transparent);
  --color-border-brand-subtle: var(--palette-brand-200);
  --color-border-brand-default: var(--palette-brand-400);

  /* Focus is an external indicator, not a border state. */
  --color-focus-ring: var(--palette-brand-500);
  --color-focus-offset: var(--palette-neutral-0);

  /* Primary and secondary actions */
  --color-action-primary: var(--palette-brand-600);
  --color-action-primary-hover: var(--palette-brand-700);
  --color-action-primary-pressed: var(--palette-brand-800);
  --color-action-primary-focus: var(--palette-brand-700);
  --color-action-primary-content: var(--palette-neutral-0);
  --color-action-primary-subtle: var(--palette-brand-50);
  --color-action-primary-subtle-hover: var(--palette-brand-100);
  --color-action-primary-subtle-content: var(--palette-brand-700);
  --color-action-secondary: var(--palette-neutral-0);
  --color-action-secondary-hover: var(--palette-neutral-50);
  --color-action-secondary-pressed: var(--palette-neutral-100);
  --color-action-secondary-focus: var(--palette-brand-500);
  --color-action-secondary-content: var(--palette-neutral-800);
  --color-action-secondary-border: var(--palette-neutral-300);
  --color-action-disabled: var(--palette-neutral-100);
  --color-action-disabled-content: var(--palette-neutral-400);
  --color-action-destructive: var(--palette-danger-600);
  --color-action-destructive-hover: var(--palette-danger-700);
  --color-action-destructive-content: var(--palette-neutral-0);

  /* Feedback: every role owns content, surface and border. */
  --color-feedback-success: var(--palette-success-600);
  --color-feedback-success-content: var(--palette-success-600);
  --color-feedback-success-surface: var(--palette-success-50);
  --color-feedback-success-border: var(--palette-success-300);
  --color-feedback-warning: var(--palette-warning-700);
  --color-feedback-warning-content: var(--palette-warning-700);
  --color-feedback-warning-surface: var(--palette-warning-50);
  --color-feedback-warning-border: var(--palette-warning-300);
  --color-feedback-danger: var(--palette-danger-600);
  --color-feedback-danger-content: var(--palette-danger-600);
  --color-feedback-danger-surface: var(--palette-danger-50);
  --color-feedback-danger-border: var(--palette-danger-300);
  --color-feedback-info: var(--palette-brand-600);
  --color-feedback-info-content: var(--palette-brand-600);
  --color-feedback-info-surface: var(--palette-brand-50);
  --color-feedback-info-border: var(--palette-brand-300);

  /* Protected brands and shadow color bases */
  --color-brand-telegram: var(--palette-telegram);
  --color-shadow-neutral: var(--palette-neutral-950);
  --color-shadow-brand: var(--palette-brand-600);

  /* Composite elevation. Components use these tokens as complete values. */
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--color-shadow-neutral) 5%, transparent);
  --shadow-sm: 0 2px 6px color-mix(in srgb, var(--color-shadow-neutral) 6%, transparent);
  --shadow-md: 0 10px 30px color-mix(in srgb, var(--color-shadow-neutral) 8%, transparent);
  --shadow-lg: 0 20px 50px color-mix(in srgb, var(--color-shadow-neutral) 12%, transparent);
  --shadow-modal: 0 28px 80px color-mix(in srgb, var(--color-shadow-neutral) 22%, transparent);
  --shadow-brand-sm: 0 10px 24px color-mix(in srgb, var(--color-shadow-brand) 20%, transparent);
  --shadow-brand-md: 0 18px 42px color-mix(in srgb, var(--color-shadow-brand) 22%, transparent);

  /* Compatibility aliases for the previous site tokens. */
  --bg: var(--color-background-page);
  --surface: var(--color-surface-default);
  --surface-soft: var(--color-surface-subtle);
  --surface-alt: var(--color-surface-muted);
  --surface-sunken: var(--color-surface-raised);
  --line: var(--color-border-subtle);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --graphite: var(--color-surface-inverse);
  --accent: var(--color-action-primary);
  --accent-strong: var(--color-action-primary-hover);
  --accent-soft: var(--color-action-primary-subtle);
  --color-success: var(--color-feedback-success-content);
  --color-success-surface: var(--color-feedback-success-surface);
  --color-warning: var(--color-feedback-warning-content);
  --color-warning-surface: var(--color-feedback-warning-surface);
  --color-danger: var(--color-feedback-danger-content);
  --color-danger-surface: var(--color-feedback-danger-surface);
  --color-info: var(--color-feedback-info-content);
  --color-info-surface: var(--color-feedback-info-surface);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-background-page: var(--palette-neutral-950);
  --color-background-section: var(--palette-neutral-900);
  --color-surface-default: var(--palette-neutral-900);
  --color-surface-subtle: var(--palette-neutral-800);
  --color-surface-muted: var(--palette-neutral-700);
  --color-surface-raised: var(--palette-neutral-800);
  --color-surface-inverse: var(--palette-neutral-25);
  --color-surface-inverse-subtle: color-mix(in srgb, var(--palette-neutral-950) 6%, transparent);
  --color-surface-glass: color-mix(in srgb, var(--palette-neutral-900) var(--opacity-glass), transparent);
  --color-surface-glass-strong: color-mix(in srgb, var(--palette-neutral-900) var(--opacity-glass-strong), transparent);
  --color-surface-brand-subtle: var(--palette-brand-900);
  --color-surface-brand-subtle-hover: var(--palette-brand-800);


  --color-text-primary: var(--palette-neutral-25);
  --color-text-secondary: var(--palette-neutral-300);
  --color-text-tertiary: var(--palette-neutral-400);
  --color-text-disabled: var(--palette-neutral-600);
  --color-text-inverse: var(--palette-neutral-900);
  --color-text-inverse-secondary: var(--palette-neutral-600);
  --color-text-link: var(--palette-brand-300);
  --color-text-link-hover: var(--palette-brand-200);

  --color-border-subtle: var(--palette-neutral-700);
  --color-border-default: var(--palette-neutral-600);
  --color-border-strong: var(--palette-neutral-400);
  --color-border-brand-subtle: var(--palette-brand-700);

  --color-focus-ring: var(--palette-brand-300);
  --color-focus-offset: var(--palette-neutral-950);

  --color-action-primary: var(--palette-brand-400);
  --color-action-primary-hover: var(--palette-brand-300);
  --color-action-primary-pressed: var(--palette-brand-200);
  --color-action-primary-focus: var(--palette-brand-300);
  --color-action-primary-content: var(--palette-neutral-950);
  --color-action-primary-subtle: var(--palette-brand-900);
  --color-action-primary-subtle-hover: var(--palette-brand-800);
  --color-action-primary-subtle-content: var(--palette-brand-200);
  --color-action-secondary: var(--palette-neutral-900);
  --color-action-secondary-hover: var(--palette-neutral-800);
  --color-action-secondary-pressed: var(--palette-neutral-700);
  --color-action-secondary-focus: var(--palette-brand-300);
  --color-action-secondary-content: var(--palette-neutral-25);
  --color-action-secondary-border: var(--palette-neutral-600);
  --color-action-disabled: var(--palette-neutral-800);
  --color-action-disabled-content: var(--palette-neutral-600);
  --color-action-destructive: var(--palette-danger-300);
  --color-action-destructive-hover: var(--palette-danger-50);
  --color-action-destructive-content: var(--palette-neutral-950);

  --color-feedback-success: var(--palette-success-300);
  --color-feedback-success-content: var(--palette-success-300);
  --color-feedback-success-surface: var(--palette-success-dark-surface);
  --color-feedback-success-border: var(--palette-success-600);
  --color-feedback-warning: var(--palette-warning-300);
  --color-feedback-warning-content: var(--palette-warning-300);
  --color-feedback-warning-surface: var(--palette-warning-dark-surface);
  --color-feedback-warning-border: var(--palette-warning-700);
  --color-feedback-danger: var(--palette-danger-300);
  --color-feedback-danger-content: var(--palette-danger-300);
  --color-feedback-danger-surface: var(--palette-danger-dark-surface);
  --color-feedback-danger-border: var(--palette-danger-600);
  --color-feedback-info: var(--palette-brand-300);
  --color-feedback-info-content: var(--palette-brand-300);
  --color-feedback-info-surface: var(--palette-brand-900);
  --color-feedback-info-border: var(--palette-brand-600);

  --color-shadow-brand: var(--palette-brand-400);

  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--color-shadow-neutral) 24%, transparent);
  --shadow-sm: 0 2px 6px color-mix(in srgb, var(--color-shadow-neutral) 28%, transparent);
  --shadow-md: 0 10px 30px color-mix(in srgb, var(--color-shadow-neutral) 32%, transparent);
  --shadow-lg: 0 20px 50px color-mix(in srgb, var(--color-shadow-neutral) 38%, transparent);
  --shadow-modal: 0 28px 80px color-mix(in srgb, var(--color-shadow-neutral) 58%, transparent);
  --shadow-brand-sm: 0 10px 24px color-mix(in srgb, var(--color-shadow-brand) 22%, transparent);
  --shadow-brand-md: 0 18px 42px color-mix(in srgb, var(--color-shadow-brand) 26%, transparent);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}