/**
 * CBTAPPS Design System
 * Version: 1.0.0
 *
 * Main entry point for the CBTAPPS design system.
 * Import this file in your main CSS to use all design system components.
 *
 * Usage:
 *   @import 'design-system.css';
 *
 * Or in your app.css:
 *   @import './design-system.css';
 */

/* ============================================
 * DESIGN TOKENS
 * ============================================ */

@import './design-system/tokens.css';

/* ============================================
 * THEMING
 * ============================================ */

@import './design-system/themes.css';

/* ============================================
 * COMPONENTS
 * ============================================ */

@import './design-system/components/buttons.css';
@import './design-system/components/forms.css';
@import './design-system/components/cards.css';
@import './design-system/components/navigation.css';

/* ============================================
 * BASE STYLES
 * ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* ============================================
 * TYPOGRAPHY
 * ============================================ */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--spacing-4) 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
  margin: 0 0 var(--spacing-4) 0;
  line-height: var(--line-height-relaxed);

  &:last-child {
    margin-bottom: 0;
  }
}

a {
  color: var(--color-text-link);
  text-decoration: underline;
  transition: color var(--transition-base);

  &:hover {
    color: var(--color-text-link-hover);
  }
}

/* ============================================
 * LAYOUT UTILITIES
 * ============================================ */

.cbt-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);

  &--sm { max-width: 640px; }
  &--md { max-width: 768px; }
  &--lg { max-width: 1024px; }
  &--xl { max-width: 1280px; }
  &--fluid { max-width: 100%; }
}

.cbt-grid {
  display: grid;
  gap: var(--spacing-4);

  &--2 { grid-template-columns: repeat(2, 1fr); }
  &--3 { grid-template-columns: repeat(3, 1fr); }
  &--4 { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 768px) {
    &--2,
    &--3,
    &--4 {
      grid-template-columns: 1fr;
    }
  }
}

.cbt-flex {
  display: flex;
  gap: var(--spacing-4);

  &--center {
    align-items: center;
    justify-content: center;
  }

  &--between {
    justify-content: space-between;
  }

  &--wrap {
    flex-wrap: wrap;
  }

  &--column {
    flex-direction: column;
  }
}

.cbt-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);

  &--sm { gap: var(--spacing-2); }
  &--md { gap: var(--spacing-4); }
  &--lg { gap: var(--spacing-6); }
  &--xl { gap: var(--spacing-8); }
}

/* ============================================
 * SPACING UTILITIES
 * ============================================ */

.cbt-m { margin: var(--spacing-4); }
.cbt-mt { margin-top: var(--spacing-4); }
.cbt-mr { margin-right: var(--spacing-4); }
.cbt-mb { margin-bottom: var(--spacing-4); }
.cbt-ml { margin-left: var(--spacing-4); }
.cbt-mx { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.cbt-my { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }

.cbt-p { padding: var(--spacing-4); }
.cbt-pt { padding-top: var(--spacing-4); }
.cbt-pr { padding-right: var(--spacing-4); }
.cbt-pb { padding-bottom: var(--spacing-4); }
.cbt-pl { padding-left: var(--spacing-4); }
.cbt-px { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.cbt-py { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }

/* Size variants */
.cbt-m--sm, .cbt-mt--sm, .cbt-mr--sm, .cbt-mb--sm, .cbt-ml--sm, .cbt-mx--sm, .cbt-my--sm,
.cbt-p--sm, .cbt-pt--sm, .cbt-pr--sm, .cbt-pb--sm, .cbt-pl--sm, .cbt-px--sm, .cbt-py--sm {
  --spacing: var(--spacing-2);
}

.cbt-m--md, .cbt-mt--md, .cbt-mr--md, .cbt-mb--md, .cbt-ml--md, .cbt-mx--md, .cbt-my--md,
.cbt-p--md, .cbt-pt--md, .cbt-pr--md, .cbt-pb--md, .cbt-pl--md, .cbt-px--md, .cbt-py--md {
  --spacing: var(--spacing-4);
}

.cbt-m--lg, .cbt-mt--lg, .cbt-mr--lg, .cbt-mb--lg, .cbt-ml--lg, .cbt-mx--lg, .cbt-my--lg,
.cbt-p--lg, .cbt-pt--lg, .cbt-pr--lg, .cbt-pb--lg, .cbt-pl--lg, .cbt-px--lg, .cbt-py--lg {
  --spacing: var(--spacing-6);
}

.cbt-m--xl, .cbt-mt--xl, .cbt-mr--xl, .cbt-mb--xl, .cbt-ml--xl, .cbt-mx--xl, .cbt-my--xl,
.cbt-p--xl, .cbt-pt--xl, .cbt-pr--xl, .cbt-pb--xl, .cbt-pl--xl, .cbt-px--xl, .cbt-py--xl {
  --spacing: var(--spacing-8);
}

/* ============================================
 * TEXT UTILITIES
 * ============================================ */

.cbt-text {
  &--primary { color: var(--color-text-primary); }
  &--secondary { color: var(--color-text-secondary); }
  &--tertiary { color: var(--color-text-tertiary); }
  &--success { color: var(--color-success-500); }
  &--warning { color: var(--color-warning-500); }
  &--error { color: var(--color-error-500); }
  &--center { text-align: center; }
  &--left { text-align: left; }
  &--right { text-align: right; }

  &--sm { font-size: var(--font-size-sm); }
  &--lg { font-size: var(--font-size-lg); }
  &--xl { font-size: var(--font-size-xl); }

  &--bold { font-weight: var(--font-weight-bold); }
  &--semibold { font-weight: var(--font-weight-semibold); }
  &--medium { font-weight: var(--font-weight-medium); }
}

/* ============================================
 * DISPLAY UTILITIES
 * ============================================ */

.cbt-d {
  &--none { display: none; }
  &--block { display: block; }
  &--inline { display: inline; }
  &--inline-block { display: inline-block; }
  &--flex { display: flex; }
  &--grid { display: grid; }
}

/* Responsive display utilities */
@media (max-width: 640px) {
  .cbt-d--sm-none { display: none; }
}

@media (min-width: 641px) and (max-width: 768px) {
  .cbt-d--md-none { display: none; }
}

@media (max-width: 768px) {
  .cbt-d--md-block { display: block; }
  .cbt-d--md-flex { display: flex; }
}

/* ============================================
 * VISIBILITY UTILITIES
 * ============================================ */

.cbt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
 * FEEDBACK COMPONENTS
 * ============================================ */

.cbt-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;

  &--info {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-200);
    color: var(--color-primary-700);
  }

  &--success {
    background-color: var(--color-success-50);
    border-color: var(--color-success-200);
    color: var(--color-success-700);
  }

  &--warning {
    background-color: var(--color-warning-50);
    border-color: var(--color-warning-200);
    color: var(--color-warning-700);
  }

  &--error {
    background-color: var(--color-error-50);
    border-color: var(--color-error-200);
    color: var(--color-error-700);
  }

  &__title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-1);
  }

  &__content {
    flex: 1;
  }

  &__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    opacity: 0.6;
    transition: opacity var(--transition-base);

    &:hover {
      opacity: 1;
    }
  }
}

.cbt-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-200);
  color: var(--color-text-primary);

  &--primary {
    background-color: var(--color-primary-500);
    color: var(--color-neutral-0);
  }

  &--success {
    background-color: var(--color-success-500);
    color: var(--color-neutral-0);
  }

  &--warning {
    background-color: var(--color-warning-500);
    color: var(--color-neutral-0);
  }

  &--error {
    background-color: var(--color-error-500);
    color: var(--color-neutral-0);
  }
}

/* ============================================
 * PROGRESS INDICATORS
 * ============================================ */

.cbt-progress {
  width: 100%;
  height: 8px;
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;

  &__bar {
    height: 100%;
    background-color: var(--color-primary-500);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
  }

  &--sm {
    height: 4px;
  }

  &--lg {
    height: 12px;
  }
}

.cbt-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-primary-500);
  border-radius: var(--radius-full);
  animation: cbt-spin 0.6s linear infinite;

  &--sm {
    width: 16px;
    height: 16px;
  }

  &--lg {
    width: 32px;
    height: 32px;
  }
}

@keyframes cbt-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
 * ACCESSIBILITY
 * ============================================ */

/* Focus visible for all interactive elements */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Skip to content link */
.cbt-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary-500);
  color: white;
  padding: var(--spacing-2) var(--spacing-4);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: var(--z-index-notification);

  &:focus {
    top: 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}