/**
 * WebCV Design System
 * Version: 1.0.0
 * Last Updated: 2025-11-01
 *
 * Main entry point for the design system.
 * Import this file to use the complete design system.
 *
 * Usage in index.scala.html:
 * <link href="@routes.Assets.versioned("css/design-system.css")" rel="stylesheet">
 */

/* ========================================
   FOUNDATION
   ======================================== */

/* Design tokens - Import first */
@import url('design-system/variables.css');

/* Custom fonts (Indivisible for DEEP branding) */
@import url('design-system/fonts.css');

/* Typography system */
@import url('design-system/typography.css');

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

/* Core components */
@import url('design-system/components/buttons.css');
@import url('design-system/components/forms.css');
@import url('design-system/components/cards.css');
@import url('design-system/components/tables.css');
@import url('design-system/components/modals.css');
@import url('design-system/components/navigation.css');
@import url('design-system/components/alerts.css');
@import url('design-system/components/badges.css');
@import url('design-system/components/loading.css');
@import url('design-system/components/pagination.css');

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

/* DEEP gradient utilities */
@import url('design-system/utilities/gradients.css');

/* ========================================
   GLOBAL RESETS
   ======================================== */

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

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   GLOBAL UTILITIES
   ======================================== */

/* Container */
.ds-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--container-padding-mobile);
  padding-left: var(--container-padding-mobile);
}

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

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

/* Spacing utilities */
.ds-mt-0 { margin-top: 0; }
.ds-mt-1 { margin-top: var(--spacing-xs); }
.ds-mt-2 { margin-top: var(--spacing-sm); }
.ds-mt-3 { margin-top: var(--spacing-md); }
.ds-mt-4 { margin-top: var(--spacing-base); }
.ds-mt-5 { margin-top: var(--spacing-lg); }
.ds-mt-6 { margin-top: var(--spacing-xl); }
.ds-mt-8 { margin-top: var(--spacing-2xl); }

.ds-mb-0 { margin-bottom: 0; }
.ds-mb-1 { margin-bottom: var(--spacing-xs); }
.ds-mb-2 { margin-bottom: var(--spacing-sm); }
.ds-mb-3 { margin-bottom: var(--spacing-md); }
.ds-mb-4 { margin-bottom: var(--spacing-base); }
.ds-mb-5 { margin-bottom: var(--spacing-lg); }
.ds-mb-6 { margin-bottom: var(--spacing-xl); }
.ds-mb-8 { margin-bottom: var(--spacing-2xl); }

.ds-ml-0 { margin-left: 0; }
.ds-ml-1 { margin-left: var(--spacing-xs); }
.ds-ml-2 { margin-left: var(--spacing-sm); }
.ds-ml-3 { margin-left: var(--spacing-md); }
.ds-ml-4 { margin-left: var(--spacing-base); }
.ds-ml-5 { margin-left: var(--spacing-lg); }
.ds-ml-6 { margin-left: var(--spacing-xl); }
.ds-ml-8 { margin-left: var(--spacing-2xl); }
.ds-ml-10 { margin-left: 40px; }
.ds-ml-auto { margin-left: auto; }

.ds-mr-0 { margin-right: 0; }
.ds-mr-1 { margin-right: var(--spacing-xs); }
.ds-mr-2 { margin-right: var(--spacing-sm); }
.ds-mr-3 { margin-right: var(--spacing-md); }
.ds-mr-4 { margin-right: var(--spacing-base); }
.ds-mr-5 { margin-right: var(--spacing-lg); }
.ds-mr-6 { margin-right: var(--spacing-xl); }
.ds-mr-8 { margin-right: var(--spacing-2xl); }
.ds-mr-10 { margin-right: 40px; }
.ds-mr-auto { margin-right: auto; }

.ds-pt-0 { padding-top: 0; }
.ds-pt-1 { padding-top: var(--spacing-xs); }
.ds-pt-2 { padding-top: var(--spacing-sm); }
.ds-pt-3 { padding-top: var(--spacing-md); }
.ds-pt-4 { padding-top: var(--spacing-base); }
.ds-pt-5 { padding-top: var(--spacing-lg); }
.ds-pt-6 { padding-top: var(--spacing-xl); }
.ds-pt-8 { padding-top: var(--spacing-2xl); }

.ds-pb-0 { padding-bottom: 0; }
.ds-pb-1 { padding-bottom: var(--spacing-xs); }
.ds-pb-2 { padding-bottom: var(--spacing-sm); }
.ds-pb-3 { padding-bottom: var(--spacing-md); }
.ds-pb-4 { padding-bottom: var(--spacing-base); }
.ds-pb-5 { padding-bottom: var(--spacing-lg); }
.ds-pb-6 { padding-bottom: var(--spacing-xl); }
.ds-pb-8 { padding-bottom: var(--spacing-2xl); }

.ds-pl-0 { padding-left: 0; }
.ds-pl-1 { padding-left: var(--spacing-xs); }
.ds-pl-2 { padding-left: var(--spacing-sm); }
.ds-pl-3 { padding-left: var(--spacing-md); }
.ds-pl-4 { padding-left: var(--spacing-base); }
.ds-pl-5 { padding-left: var(--spacing-lg); }
.ds-pl-6 { padding-left: var(--spacing-xl); }
.ds-pl-8 { padding-left: var(--spacing-2xl); }

.ds-pr-0 { padding-right: 0; }
.ds-pr-1 { padding-right: var(--spacing-xs); }
.ds-pr-2 { padding-right: var(--spacing-sm); }
.ds-pr-3 { padding-right: var(--spacing-md); }
.ds-pr-4 { padding-right: var(--spacing-base); }
.ds-pr-5 { padding-right: var(--spacing-lg); }
.ds-pr-6 { padding-right: var(--spacing-xl); }
.ds-pr-8 { padding-right: var(--spacing-2xl); }

.ds-p-0 { padding: 0; }
.ds-p-1 { padding: var(--spacing-xs); }
.ds-p-2 { padding: var(--spacing-sm); }
.ds-p-3 { padding: var(--spacing-md); }
.ds-p-4 { padding: var(--spacing-base); }
.ds-p-5 { padding: var(--spacing-lg); }
.ds-p-6 { padding: var(--spacing-xl); }
.ds-p-8 { padding: var(--spacing-2xl); }

/* Padding X and Y axis utilities */
.ds-px-0 { padding-left: 0; padding-right: 0; }
.ds-px-1 { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.ds-px-2 { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.ds-px-3 { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.ds-px-4 { padding-left: var(--spacing-base); padding-right: var(--spacing-base); }
.ds-px-5 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.ds-px-6 { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.ds-px-8 { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }

.ds-py-0 { padding-top: 0; padding-bottom: 0; }
.ds-py-1 { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.ds-py-2 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.ds-py-3 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.ds-py-4 { padding-top: var(--spacing-base); padding-bottom: var(--spacing-base); }
.ds-py-5 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.ds-py-6 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.ds-py-8 { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }

/* Display utilities */
.ds-block { display: block; }
.ds-inline-block { display: inline-block; }
.ds-inline { display: inline; }
.ds-flex { display: flex; }
.ds-inline-flex { display: inline-flex; }
.ds-grid { display: grid; }
.ds-hidden { display: none; }

/* Flexbox utilities */
.ds-flex-row { flex-direction: row; }
.ds-flex-col { flex-direction: column; }
.ds-flex-wrap { flex-wrap: wrap; }
.ds-flex-nowrap { flex-wrap: nowrap; }
.ds-items-start { align-items: flex-start; }
.ds-items-center { align-items: center; }
.ds-items-end { align-items: flex-end; }
.ds-items-stretch { align-items: stretch; }
.ds-justify-start { justify-content: flex-start; }
.ds-justify-center { justify-content: center; }
.ds-justify-end { justify-content: flex-end; }
.ds-justify-between { justify-content: space-between; }
.ds-justify-around { justify-content: space-around; }
.ds-gap-0 { gap: 0; }
.ds-gap-1 { gap: var(--spacing-xs); }
.ds-gap-2 { gap: var(--spacing-sm); }
.ds-gap-3 { gap: var(--spacing-md); }
.ds-gap-4 { gap: var(--spacing-base); }
.ds-gap-6 { gap: var(--spacing-xl); }

/* Width utilities */
.ds-w-full { width: 100%; }
.ds-w-auto { width: auto; }
.ds-w-1\/2 { width: 50%; }
.ds-w-1\/3 { width: 33.333333%; }
.ds-w-2\/3 { width: 66.666667%; }
.ds-w-1\/4 { width: 25%; }
.ds-w-3\/4 { width: 75%; }

/* Max width utilities */
.ds-max-w-sm { max-width: 384px; }
.ds-max-w-md { max-width: 448px; }
.ds-max-w-lg { max-width: 512px; }
.ds-max-w-xl { max-width: 576px; }
.ds-max-w-2xl { max-width: 672px; }
.ds-max-w-full { max-width: 100%; }

/* Background utilities */
.ds-bg-white { background-color: var(--color-white); }
.ds-bg-transparent { background-color: transparent; }
.ds-bg-neutral-50 { background-color: var(--color-neutral-50); }
.ds-bg-neutral-100 { background-color: var(--color-neutral-100); }
.ds-bg-primary-50 { background-color: var(--color-primary-50); }

/* Border utilities */
.ds-border { border: var(--border-width-thin) solid var(--color-neutral-200); }
.ds-border-none { border: none; }
.ds-border-t { border-top: var(--border-width-thin) solid var(--color-neutral-200); }
.ds-border-b { border-bottom: var(--border-width-thin) solid var(--color-neutral-200); }
.ds-border-neutral-200 { border-color: var(--color-neutral-200); }
.ds-border-neutral-300 { border-color: var(--color-neutral-300); }
.ds-rounded { border-radius: var(--border-radius-md); }
.ds-rounded-lg { border-radius: var(--border-radius-lg); }
.ds-rounded-full { border-radius: var(--border-radius-full); }

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

/* Pointer utilities */
.ds-pointer { cursor: pointer; }
.ds-cursor-default { cursor: default; }
.ds-cursor-not-allowed { cursor: not-allowed; }

/* Text utilities */
.ds-text-center { text-align: center; }
.ds-text-left { text-align: left; }
.ds-text-right { text-align: right; }

/* Text decoration utilities */
.ds-underline { text-decoration: underline; }
.ds-no-underline { text-decoration: none; }
.ds-line-through { text-decoration: line-through; }

/* Text color utilities */
.ds-text-primary { color: var(--color-primary-500); }
.ds-text-success { color: var(--color-success-600); }
.ds-text-warning { color: var(--color-warning-600); }
.ds-text-error { color: var(--color-error-600); }
.ds-text-info { color: var(--color-info-600); }
.ds-text-neutral { color: var(--color-neutral-600); }
.ds-text-neutral-600 { color: var(--color-neutral-600); }
.ds-text-neutral-700 { color: var(--color-neutral-700); }
.ds-text-neutral-800 { color: var(--color-neutral-800); }
.ds-text-neutral-900 { color: var(--color-neutral-900); }
.ds-text-muted { color: var(--color-neutral-500); }

/* Text size utilities */
.ds-text-xs { font-size: var(--font-size-xs); }
.ds-text-sm { font-size: var(--font-size-sm); }
.ds-text-base { font-size: var(--font-size-base); }
.ds-text-md { font-size: var(--font-size-md); }
.ds-text-lg { font-size: var(--font-size-lg); }
.ds-text-xl { font-size: var(--font-size-xl); }
.ds-text-2xl { font-size: var(--font-size-2xl); }
.ds-text-3xl { font-size: var(--font-size-3xl); }

/* Font weight utilities */
.ds-font-normal { font-weight: var(--font-weight-regular); }
.ds-font-medium { font-weight: var(--font-weight-medium); }
.ds-font-semibold { font-weight: var(--font-weight-semibold); }
.ds-font-bold { font-weight: var(--font-weight-bold); }

/* Divider */
.ds-divider {
  height: 1px;
  margin: var(--spacing-lg) 0;
  background-color: var(--color-neutral-200);
  border: 0;
}

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

/* Border left utilities */
.ds-border-l { border-left: var(--border-width-thin) solid var(--color-neutral-200); }
.ds-border-l-2 { border-left: 2px solid var(--color-neutral-200); }
.ds-border-l-3 { border-left: 3px solid var(--color-neutral-300); }

/* Max height utilities */
.ds-max-h-60vh { max-height: 60vh; }

/* Position utilities */
.ds-relative { position: relative; }
.ds-absolute { position: absolute; }
.ds-fixed { position: fixed; }
.ds-sticky { position: sticky; }

/* Min height utilities */
.ds-min-h-screen { min-height: 100vh; }
.ds-min-h-screen-minus-navbar { min-height: calc(100vh - 64px); }

/* Main content area (prevents scrollbar shift) */
.ds-main-content {
  padding-left: calc(100vw - 100%);
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 767px) {
  .ds-hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .ds-hidden-tablet { display: none !important; }

  /* Medium screen utilities (md:) */
  .md\:ds-flex-row { flex-direction: row; }
  .md\:ds-flex-col { flex-direction: column; }
  .md\:ds-items-center { align-items: center; }
  .md\:ds-justify-between { justify-content: space-between; }
  .md\:ds-order-1 { order: 1; }
  .md\:ds-order-2 { order: 2; }
  .md\:ds-w-1\/3 { width: 33.333333%; }
  .md\:ds-w-2\/3 { width: 66.666667%; }
}

@media (min-width: 1024px) {
  .ds-hidden-desktop { display: none !important; }
}

/* ========================================
   PRINT UTILITIES
   ======================================== */

@media print {
  .ds-print-hidden {
    display: none !important;
  }

  .ds-print-visible {
    display: block !important;
  }
}

/* ========================================
   TRANSITION BRIDGE (Temporary)
   Helps existing Bootstrap classes work with new design system
   ======================================== */

.btn-primary {
  /* Map to design system button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  background-color: var(--color-primary-500);
  border: var(--border-width-medium) solid var(--color-primary-500);
  border-radius: var(--border-radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-primary:hover {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

/* Add more transition mappings as needed */

/* ========================================
   END OF DESIGN SYSTEM
   ======================================== */