/*
 * Main CSS file for OK Tools
 * Combines all design system components and layouts
 * Uses CSS variables defined in _tokens.css
 */

/* Import design tokens first */
@import './design-system/_tokens.css';

/* Import component styles */
@import './components/_sidebar.css';
@import './components/_forms.css';
@import './components/_cards.css';
@import './components/_buttons.css';
@import './components/_tables.css';
@import './components/_modals.css';

/* Import layout styles */
@import './layouts/_grid.css';
@import './layouts/_page.css';
@import './layouts/_responsive.css';

/* Import accessibility styles */
@import './design-system/_accessibility.css';

/* Import animation styles */
@import './design-system/_animations.css';

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

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

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  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);
  font-weight: var(--font-weight-medium);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Utilities */
.text-center {
  text-align: center !important;
}

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

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

/* Spacing utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }

.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
.mx-1 { margin-right: var(--space-1) !important; margin-left: var(--space-1) !important; }
.mx-2 { margin-right: var(--space-2) !important; margin-left: var(--space-2) !important; }
.mx-3 { margin-right: var(--space-3) !important; margin-left: var(--space-3) !important; }
.mx-4 { margin-right: var(--space-4) !important; margin-left: var(--space-4) !important; }
.mx-5 { margin-right: var(--space-5) !important; margin-left: var(--space-5) !important; }
.mx-6 { margin-right: var(--space-6) !important; margin-left: var(--space-6) !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }

.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.px-1 { padding-right: var(--space-1) !important; padding-left: var(--space-1) !important; }
.px-2 { padding-right: var(--space-2) !important; padding-left: var(--space-2) !important; }
.px-3 { padding-right: var(--space-3) !important; padding-left: var(--space-3) !important; }
.px-4 { padding-right: var(--space-4) !important; padding-left: var(--space-4) !important; }
.px-5 { padding-right: var(--space-5) !important; padding-left: var(--space-5) !important; }
.px-6 { padding-right: var(--space-6) !important; padding-left: var(--space-6) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-6 { padding-top: var(--space-6) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }

/* Width utilities */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Height utilities */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* Border utilities */
.border { border: 1px solid var(--color-border) !important; }
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-end { border-right: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.border-start { border-left: 1px solid var(--color-border) !important; }
.border-0 { border: 0 !important; }

.rounded { border-radius: var(--radius-md) !important; }
.rounded-top { border-top-left-radius: var(--radius-md) !important; border-top-right-radius: var(--radius-md) !important; }
.rounded-end { border-top-right-radius: var(--radius-md) !important; border-bottom-right-radius: var(--radius-md) !important; }
.rounded-bottom { border-bottom-right-radius: var(--radius-md) !important; border-bottom-left-radius: var(--radius-md) !important; }
.rounded-start { border-top-left-radius: var(--radius-md) !important; border-bottom-left-radius: var(--radius-md) !important; }
.rounded-circle { border-radius: var(--radius-full) !important; }
.rounded-pill { border-radius: var(--radius-full) !important; }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

/* Flex utilities */
.flex-fill { flex: 1 1 auto !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }

.order-first { order: -1 !important; }
.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important; }
.order-5 { order: 5 !important; }
.order-last { order: 6 !important; }

/* Position utilities */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }
.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.start-100 { left: 100% !important; }
.end-0 { right: 0 !important; }
.end-50 { right: 50% !important; }
.end-100 { right: 100% !important; }

.translate-middle { transform: translate(-50%, -50%) !important; }
.translate-middle-x { transform: translateX(-50%) !important; }
.translate-middle-y { transform: translateY(-50%) !important; }

/* Visibility utilities */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Text utilities */
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.font-monospace { font-family: var(--font-family-mono) !important; }
.fs-1 { font-size: var(--font-size-4xl) !important; }
.fs-2 { font-size: var(--font-size-3xl) !important; }
.fs-3 { font-size: var(--font-size-2xl) !important; }
.fs-4 { font-size: var(--font-size-xl) !important; }
.fs-5 { font-size: var(--font-size-lg) !important; }
.fs-6 { font-size: var(--font-size-base) !important; }

.fst-italic { font-style: italic !important; }
.fst-normal { font-style: normal !important; }

.fw-light { font-weight: 300 !important; }
.fw-lighter { font-weight: var(--font-weight-normal) !important; }
.fw-normal { font-weight: var(--font-weight-normal) !important; }
.fw-medium { font-weight: var(--font-weight-medium) !important; }
.fw-semibold { font-weight: var(--font-weight-semibold) !important; }
.fw-bold { font-weight: var(--font-weight-bold) !important; }
.fw-bolder { font-weight: 700 !important; }
.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: var(--line-height-tight) !important; }
.lh-base { line-height: var(--line-height-base) !important; }
.lh-lg { line-height: var(--line-height-relaxed) !important; }

.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }

.text-primary { color: var(--color-accent) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-info { color: var(--color-info) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-light { color: var(--color-text-white) !important; }
.text-dark { color: var(--color-text-primary) !important; }
.text-body { color: var(--color-text-primary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-black-50 { color: rgba(0, 0, 0, 0.5) !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }

.text-reset { color: inherit !important; }

/* Link utilities */
.link-primary {
  color: var(--color-accent) !important;
}
.link-primary:hover,
.link-primary:focus {
  color: var(--color-accent-hover) !important;
}

/* Background utilities */
.bg-primary { background-color: var(--color-accent) !important; }
.bg-secondary { background-color: var(--color-bg-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-light { background-color: var(--color-bg-secondary) !important; }
.bg-dark { background-color: var(--color-text-primary) !important; }
.bg-body { background-color: var(--color-bg-primary) !important; }
.bg-white { background-color: var(--color-text-white) !important; }
.bg-transparent { background-color: transparent !important; }

/* Z-index utilities */
.z-0 { z-index: 0 !important; }
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }
.z-n1 { z-index: -1 !important; }

/* Gap utilities */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }
.gap-6 { gap: var(--space-6) !important; }

.row-gap-0 { row-gap: 0 !important; }
.row-gap-1 { row-gap: var(--space-1) !important; }
.row-gap-2 { row-gap: var(--space-2) !important; }
.row-gap-3 { row-gap: var(--space-3) !important; }
.row-gap-4 { row-gap: var(--space-4) !important; }
.row-gap-5 { row-gap: var(--space-5) !important; }
.row-gap-6 { row-gap: var(--space-6) !important; }

.column-gap-0 { column-gap: 0 !important; }
.column-gap-1 { column-gap: var(--space-1) !important; }
.column-gap-2 { column-gap: var(--space-2) !important; }
.column-gap-3 { column-gap: var(--space-3) !important; }
.column-gap-4 { column-gap: var(--space-4) !important; }
.column-gap-5 { column-gap: var(--space-5) !important; }
.column-gap-6 { column-gap: var(--space-6) !important; }

/* Object fit utilities */
.object-fit-contain { object-fit: contain !important; }
.object-fit-cover { object-fit: cover !important; }
.object-fit-fill { object-fit: fill !important; }
.object-fit-scale { object-fit: scale-down !important; }
.object-fit-none { object-fit: none !important; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-zoom-in { cursor: zoom-in !important; }
.cursor-zoom-out { cursor: zoom-out !important; }

/* Overflow utilities */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

/* Resize utilities */
.resize-none { resize: none !important; }
.resize-both { resize: both !important; }
.resize-horizontal { resize: horizontal !important; }
.resize-vertical { resize: vertical !important; }

/* Shadow DOM compatibility */
::slotted(*) {
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
}

/* Focus styles for accessibility */
*:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-border: #000000;
    --color-text-primary: #000000;
    --color-bg-primary: #ffffff;
  }
  
  [data-theme="dark"]:root {
    --color-text-primary: #ffffff;
    --color-bg-primary: #000000;
  }
}