/**
 * Group BK Design System - Design Tokens
 * Extracted from Concrete UI Figma Design System
 * File Key: A9FwBAtPUS57vkrRmSUPHh
 *
 * @version 1.0.0
 * @generated 2026-01-28
 */

:root {
  /* ============================================
   * COLORS - Brand Primary (Teal)
   * ============================================ */
  --color-brand-primary-50: #E7F0F2;
  --color-brand-primary-100: #D0DEE2;
  --color-brand-primary-200: #A1BDC6;
  --color-brand-primary-300: #719CA9;
  --color-brand-primary-400: #427B8D;
  --color-brand-primary-500: #135A70;
  --color-brand-primary-600: #2F7A8C;
  --color-brand-primary-700: #23697A;
  --color-brand-primary-800: #185968;
  --color-brand-primary-900: #135A70;
  --color-brand-primary: var(--color-brand-primary-900);

  /* ============================================
   * COLORS - Brand Secondary (Sage Green)
   * ============================================ */
  --color-brand-secondary-50: #F4F5F4;
  --color-brand-secondary-100: #EFF1EF;
  --color-brand-secondary-200: #DFE2DF;
  --color-brand-secondary-300: #CFD4CE;
  --color-brand-secondary-400: #BFC5BE;
  --color-brand-secondary-500: #AFB7AE;
  --color-brand-secondary-600: #8F988D;
  --color-brand-secondary-700: #7D877B;
  --color-brand-secondary-800: #6C766A;
  --color-brand-secondary-900: #5B655A;
  --color-brand-secondary: var(--color-brand-secondary-400);

  /* ============================================
   * COLORS - UI Text
   * ============================================ */
  --color-text-primary: #135A70;
  --color-text-secondary: #000000;
  --color-text-tertiary: #AFB7AE;
  --color-text-disabled: #9E9E9E;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #2C80FF;
  --color-text-link-hover: var(--color-brand-primary-700);
  --color-text-error: #FF5000;
  --color-text-success: #00EB8D;
  --color-text-warning: #F47A00;

  /* ============================================
   * COLORS - UI Elements
   * ============================================ */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #685879;
  --color-bg-tertiary: #EAEAEA;
  --color-bg-inverse: #1A1A1A;
  --color-bg-overlay: rgba(19, 90, 112, 0.8);

  --color-element-tertiary: #B3ABBC;

  --color-border-default: #E0E0E0;
  --color-border-strong: #BDBDBD;
  --color-border-focus: #2C80FF;
  --color-border-error: #FF5000;
  --color-border-success: #00EB8D;
  --color-border-warning: #F47A00;

  --color-surface-elevated: #FFFFFF;
  --color-surface-sunken: #FAFAFA;

  /* ============================================
   * TYPOGRAPHY - Font Family
   * ============================================ */
  --font-family-primary: 'Saira', sans-serif;
  --font-family-mono: 'Roboto Mono', monospace;

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

  /* ============================================
   * TYPOGRAPHY - Headings
   * ============================================ */
  /* H1 - 80px */
  --font-size-h1: 5rem;
  --line-height-h1: 1.1;
  --letter-spacing-h1: -0.02em;
  --font-weight-h1: var(--font-weight-bold);

  /* H2 - 64px */
  --font-size-h2: 4rem;
  --line-height-h2: 1.15;
  --letter-spacing-h2: -0.01em;
  --font-weight-h2: var(--font-weight-bold);

  /* H3 - 48px */
  --font-size-h3: 3rem;
  --line-height-h3: 1.2;
  --letter-spacing-h3: 0;
  --font-weight-h3: var(--font-weight-semibold);

  /* H4 - 32px */
  --font-size-h4: 2rem;
  --line-height-h4: 1.25;
  --letter-spacing-h4: 0;
  --font-weight-h4: var(--font-weight-semibold);

  /* H5 - 24px */
  --font-size-h5: 1.5rem;
  --line-height-h5: 1.3;
  --letter-spacing-h5: 0;
  --font-weight-h5: var(--font-weight-medium);

  /* H6 - 12px */
  --font-size-h6: 0.75rem;
  --line-height-h6: 1.4;
  --letter-spacing-h6: 0.05em;
  --font-weight-h6: var(--font-weight-medium);

  /* ============================================
   * TYPOGRAPHY - Body Text
   * ============================================ */
  /* Body 1 - 16px (default) */
  --font-size-body-1: 1rem;
  --line-height-body-1: 1.5;
  --font-weight-body-1: var(--font-weight-regular);

  /* Body 2 - 14px */
  --font-size-body-2: 0.875rem;
  --line-height-body-2: 1.5;
  --font-weight-body-2: var(--font-weight-regular);

  /* Body 3 - 12px */
  --font-size-body-3: 0.75rem;
  --line-height-body-3: 1.5;
  --font-weight-body-3: var(--font-weight-regular);

  /* ============================================
   * TYPOGRAPHY - Button Text
   * ============================================ */
  --font-size-button-lg: 1rem;
  --font-size-button-md: 0.875rem;
  --font-size-button-sm: 0.75rem;
  --font-weight-button: var(--font-weight-medium);
  --letter-spacing-button: 0.02em;

  /* ============================================
   * SPACING SCALE
   * Based on 8px base unit
   * ============================================ */
  --space-2: 0.125rem;    /* 2px */
  --space-4: 0.25rem;     /* 4px */
  --space-8: 0.5rem;      /* 8px */
  --space-12: 0.75rem;    /* 12px */
  --space-16: 1rem;       /* 16px */
  --space-20: 1.25rem;    /* 20px */
  --space-24: 1.5rem;     /* 24px */
  --space-32: 2rem;       /* 32px */
  --space-40: 2.5rem;     /* 40px */
  --space-48: 3rem;       /* 48px */
  --space-56: 3.5rem;     /* 56px */
  --space-64: 4rem;       /* 64px */
  --space-80: 5rem;       /* 80px */
  --space-96: 6rem;       /* 96px */
  --space-128: 8rem;      /* 128px */
  --space-160: 10rem;     /* 160px */
  --space-192: 12rem;     /* 192px */
  --space-224: 14rem;     /* 224px */
  --space-256: 16rem;     /* 256px */

  /* ============================================
   * CORNER RADIUS
   * ============================================ */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px - Small */
  --radius-md: 0.5rem;    /* 8px - Medium */
  --radius-lg: 1rem;      /* 16px - Large */
  --radius-xl: 2rem;      /* 32px - XL */
  --radius-full: 9999px;  /* Pill/Circle */

  /* ============================================
   * ELEVATION / SHADOWS
   * ============================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-2: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
  --shadow-4: 0 8px 16px 0 rgba(0, 0, 0, 0.15);

  /* ============================================
   * GRID SYSTEM
   * ============================================ */
  /* Desktop - 12 columns */
  --grid-columns-desktop: 12;
  --grid-gutter-desktop: 24px;
  --grid-margin-desktop: 80px;
  --grid-max-width-desktop: 1440px;

  /* Tablet - 8 columns */
  --grid-columns-tablet: 8;
  --grid-gutter-tablet: 16px;
  --grid-margin-tablet: 40px;
  --grid-max-width-tablet: 768px;

  /* Mobile - 4 columns */
  --grid-columns-mobile: 4;
  --grid-gutter-mobile: 16px;
  --grid-margin-mobile: 16px;
  --grid-max-width-mobile: 360px;

  /* ============================================
   * BREAKPOINTS
   * ============================================ */
  --breakpoint-mobile: 360px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;

  /* ============================================
   * Z-INDEX SCALE
   * ============================================ */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* ============================================
   * TRANSITIONS
   * ============================================ */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* ============================================
   * BUTTON TOKENS
   * ============================================ */
  /* Primary Button */
  --btn-primary-bg: var(--color-brand-primary-900);
  --btn-primary-bg-hover: var(--color-brand-primary-700);
  --btn-primary-bg-active: var(--color-brand-primary-800);
  --btn-primary-bg-disabled: var(--color-bg-tertiary);
  --btn-primary-text: var(--color-text-inverse);
  --btn-primary-text-disabled: var(--color-text-disabled);

  /* Secondary Button (Outlined) */
  --btn-secondary-bg: transparent;
  --btn-secondary-bg-hover: var(--color-brand-primary-50);
  --btn-secondary-bg-active: var(--color-brand-primary-100);
  --btn-secondary-border: var(--color-brand-primary-900);
  --btn-secondary-border-hover: var(--color-brand-primary-700);
  --btn-secondary-border-disabled: var(--color-border-default);
  --btn-secondary-text: var(--color-brand-primary-900);
  --btn-secondary-text-hover: var(--color-brand-primary-700);
  --btn-secondary-text-disabled: var(--color-text-disabled);

  /* Text Button */
  --btn-text-bg: transparent;
  --btn-text-bg-hover: var(--color-brand-primary-50);
  --btn-text-bg-active: var(--color-brand-primary-100);
  --btn-text-text: var(--color-brand-primary-900);
  --btn-text-text-hover: var(--color-brand-primary-700);
  --btn-text-text-disabled: var(--color-text-disabled);

  /* Button Sizes */
  --btn-height-lg: 3rem;      /* 48px */
  --btn-height-md: 2.5rem;    /* 40px */
  --btn-height-sm: 2rem;      /* 32px */
  --btn-padding-x-lg: var(--space-24);
  --btn-padding-x-md: var(--space-16);
  --btn-padding-x-sm: var(--space-12);
  --btn-border-radius: var(--radius-md);
  --btn-border-width: 2px;

  /* Icon Button */
  --btn-icon-size-lg: 3rem;
  --btn-icon-size-md: 2.5rem;
  --btn-icon-size-sm: 2rem;

  /* ============================================
   * FORM TOKENS
   * ============================================ */
  /* Input Fields */
  --input-height: 3rem;       /* 48px */
  --input-padding-x: var(--space-16);
  --input-padding-y: var(--space-12);
  --input-border-radius: var(--radius-md);
  --input-border-width: 1px;

  --input-bg: var(--color-bg-primary);
  --input-bg-disabled: var(--color-bg-secondary);
  --input-border: var(--color-border-default);
  --input-border-hover: var(--color-border-strong);
  --input-border-focus: var(--color-brand-primary-900);
  --input-border-error: var(--color-border-error);
  --input-text: var(--color-text-primary);
  --input-text-placeholder: var(--color-text-tertiary);
  --input-text-disabled: var(--color-text-disabled);

  /* Labels */
  --label-font-size: var(--font-size-body-2);
  --label-font-weight: var(--font-weight-medium);
  --label-color: var(--color-text-secondary);
  --label-color-error: var(--color-text-error);
  --label-margin-bottom: var(--space-4);

  /* Helper Text */
  --helper-font-size: var(--font-size-body-3);
  --helper-color: var(--color-text-tertiary);
  --helper-color-error: var(--color-text-error);
  --helper-margin-top: var(--space-4);

  /* ============================================
   * SELECTION CONTROL TOKENS
   * ============================================ */
  /* Checkbox */
  --checkbox-size: 1.25rem;   /* 20px */
  --checkbox-border-radius: var(--radius-sm);
  --checkbox-border-width: 2px;
  --checkbox-border: var(--color-border-strong);
  --checkbox-border-checked: var(--color-brand-primary-900);
  --checkbox-bg: var(--color-bg-primary);
  --checkbox-bg-checked: var(--color-brand-primary-900);
  --checkbox-checkmark: var(--color-text-inverse);
  --checkbox-bg-disabled: var(--color-bg-secondary);
  --checkbox-border-disabled: var(--color-border-default);

  /* Radio Button */
  --radio-size: 1.25rem;      /* 20px */
  --radio-border-width: 2px;
  --radio-border: var(--color-border-strong);
  --radio-border-checked: var(--color-brand-primary-900);
  --radio-bg: var(--color-bg-primary);
  --radio-dot-size: 0.625rem; /* 10px */
  --radio-dot-color: var(--color-brand-primary-900);
  --radio-bg-disabled: var(--color-bg-secondary);
  --radio-border-disabled: var(--color-border-default);

  /* Toggle / Switch */
  --toggle-width: 2.75rem;    /* 44px */
  --toggle-height: 1.5rem;    /* 24px */
  --toggle-thumb-size: 1.25rem; /* 20px */
  --toggle-bg-off: var(--color-bg-tertiary);
  --toggle-bg-on: var(--color-brand-primary-900);
  --toggle-thumb-bg: var(--color-bg-primary);
  --toggle-bg-disabled: var(--color-bg-secondary);

  /* ============================================
   * LIST ITEM TOKENS
   * ============================================ */
  --list-item-padding-x: var(--space-16);
  --list-item-padding-y: var(--space-12);
  --list-item-bg: var(--color-bg-primary);
  --list-item-bg-hover: var(--color-bg-secondary);
  --list-item-bg-active: var(--color-brand-primary-50);
  --list-item-border-radius: var(--radius-md);
  --list-item-icon-size: 2.5rem; /* 40px */
  --list-item-icon-color: var(--color-brand-primary-900);
  --list-item-text-primary: var(--color-text-primary);
  --list-item-text-secondary: var(--color-text-tertiary);
  --list-item-gap: var(--space-12);

  /* ============================================
   * ICON TOKENS
   * ============================================ */
  --icon-size-sm: 1rem;       /* 16px */
  --icon-size-md: 1.5rem;     /* 24px */
  --icon-size-lg: 2rem;       /* 32px */
  --icon-size-xl: 2.5rem;     /* 40px */
  --icon-color-default: var(--color-brand-primary-900);
  --icon-color-secondary: var(--color-text-secondary);
  --icon-color-inverse: var(--color-text-inverse);
  --icon-color-disabled: var(--color-text-disabled);
}

/* ============================================
 * DARK THEME OVERRIDES
 * ============================================ */
[data-theme="dark"],
.theme-dark {
  /* Text Colors */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B0B0B0;
  --color-text-tertiary: #808080;
  --color-text-inverse: #1A1A1A;

  /* Background Colors */
  --color-bg-primary: #1A1A1A;
  --color-bg-secondary: #2A2A2A;
  --color-bg-tertiary: #3A3A3A;
  --color-bg-inverse: #FFFFFF;

  /* Border Colors */
  --color-border-default: #404040;
  --color-border-strong: #606060;

  /* Surface Colors */
  --color-surface-elevated: #2A2A2A;
  --color-surface-sunken: #141414;

  /* Shadows need adjustment for dark mode */
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  --shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
  --shadow-4: 0 8px 16px 0 rgba(0, 0, 0, 0.6);

  /* Button overrides for dark theme */
  --btn-secondary-bg-hover: rgba(19, 90, 112, 0.2);
  --btn-secondary-bg-active: rgba(19, 90, 112, 0.3);
  --btn-text-bg-hover: rgba(19, 90, 112, 0.2);
  --btn-text-bg-active: rgba(19, 90, 112, 0.3);

  /* Form overrides */
  --input-bg: var(--color-bg-secondary);
  --input-bg-disabled: var(--color-bg-tertiary);

  /* Selection control overrides */
  --checkbox-bg: var(--color-bg-secondary);
  --radio-bg: var(--color-bg-secondary);
  --toggle-bg-off: var(--color-bg-tertiary);
  --toggle-thumb-bg: var(--color-bg-primary);

  /* List item overrides */
  --list-item-bg: var(--color-bg-secondary);
  --list-item-bg-hover: var(--color-bg-tertiary);
}

/* ============================================
 * UTILITY: Responsive Grid Container
 * ============================================ */
.container {
  width: 100%;
  max-width: var(--grid-max-width-desktop);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-margin-mobile);
  padding-right: var(--grid-margin-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--grid-margin-tablet);
    padding-right: var(--grid-margin-tablet);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--grid-margin-desktop);
    padding-right: var(--grid-margin-desktop);
  }
}