/**
 * Nordic Corporate Design System - Base Styles
 * Reset, Typography, and Utilities
 */

/* =============================================
   CSS RESET (Modern Minimal)
   ============================================= */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  line-height: var(--nordic-leading-normal);
  font-family: var(--nordic-font-body);
  font-size: var(--nordic-text-base);
  color: var(--nordic-text-primary);
  background-color: var(--nordic-bg-base);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: var(--nordic-primary);
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

/* Headings */
.nordic-h1, h1.nordic {
  font-family: var(--nordic-font-display);
  font-size: var(--nordic-text-4xl);
  font-weight: var(--nordic-weight-normal);
  line-height: var(--nordic-leading-tight);
  letter-spacing: var(--nordic-tracking-tight);
  color: var(--nordic-text-primary);
}

.nordic-h2, h2.nordic {
  font-family: var(--nordic-font-display);
  font-size: var(--nordic-text-3xl);
  font-weight: var(--nordic-weight-normal);
  line-height: var(--nordic-leading-tight);
  letter-spacing: var(--nordic-tracking-tight);
  color: var(--nordic-text-primary);
}

.nordic-h3, h3.nordic {
  font-family: var(--nordic-font-body);
  font-size: var(--nordic-text-2xl);
  font-weight: var(--nordic-weight-semibold);
  line-height: var(--nordic-leading-snug);
  color: var(--nordic-text-primary);
}

.nordic-h4, h4.nordic {
  font-family: var(--nordic-font-body);
  font-size: var(--nordic-text-xl);
  font-weight: var(--nordic-weight-semibold);
  line-height: var(--nordic-leading-snug);
  color: var(--nordic-text-primary);
}

.nordic-h5, h5.nordic {
  font-family: var(--nordic-font-body);
  font-size: var(--nordic-text-lg);
  font-weight: var(--nordic-weight-semibold);
  line-height: var(--nordic-leading-normal);
  color: var(--nordic-text-primary);
}

.nordic-h6, h6.nordic {
  font-family: var(--nordic-font-body);
  font-size: var(--nordic-text-base);
  font-weight: var(--nordic-weight-semibold);
  line-height: var(--nordic-leading-normal);
  color: var(--nordic-text-primary);
}

/* Body text */
.nordic-body-lg {
  font-size: var(--nordic-text-lg);
  line-height: var(--nordic-leading-relaxed);
}

.nordic-body {
  font-size: var(--nordic-text-base);
  line-height: var(--nordic-leading-normal);
}

.nordic-body-sm {
  font-size: var(--nordic-text-sm);
  line-height: var(--nordic-leading-normal);
}

.nordic-caption {
  font-size: var(--nordic-text-xs);
  line-height: var(--nordic-leading-normal);
  letter-spacing: var(--nordic-tracking-wide);
}

.nordic-overline {
  font-size: var(--nordic-text-xs);
  font-weight: var(--nordic-weight-semibold);
  line-height: var(--nordic-leading-normal);
  letter-spacing: var(--nordic-tracking-wider);
  text-transform: uppercase;
  color: var(--nordic-text-muted);
}

/* Text colors */
.nordic-text-primary { color: var(--nordic-text-primary); }
.nordic-text-secondary { color: var(--nordic-text-secondary); }
.nordic-text-muted { color: var(--nordic-text-muted); }
.nordic-text-inverse { color: var(--nordic-text-inverse); }
.nordic-text-success { color: var(--nordic-success); }
.nordic-text-warning { color: var(--nordic-warning-dark); }
.nordic-text-error { color: var(--nordic-error); }
.nordic-text-info { color: var(--nordic-info); }
.nordic-text-accent { color: var(--nordic-accent); }
.nordic-text-teal { color: var(--nordic-primary); }

/* Text alignment */
.nordic-text-left { text-align: left; }
.nordic-text-center { text-align: center; }
.nordic-text-right { text-align: right; }

/* Font weights */
.nordic-font-normal { font-weight: var(--nordic-weight-normal); }
.nordic-font-medium { font-weight: var(--nordic-weight-medium); }
.nordic-font-semibold { font-weight: var(--nordic-weight-semibold); }
.nordic-font-bold { font-weight: var(--nordic-weight-bold); }

/* Links */
.nordic-link {
  color: var(--nordic-text-link);
  text-decoration: none;
  transition: color var(--nordic-duration-fast) var(--nordic-ease-default);
}

.nordic-link:hover {
  color: var(--nordic-text-link-hover);
  text-decoration: underline;
}

.nordic-link--subtle {
  color: var(--nordic-text-secondary);
}

.nordic-link--subtle:hover {
  color: var(--nordic-primary);
}

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

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

/* Flexbox */
.nordic-flex-row { flex-direction: row; }
.nordic-flex-col { flex-direction: column; }
.nordic-flex-wrap { flex-wrap: wrap; }
.nordic-flex-nowrap { flex-wrap: nowrap; }
.nordic-flex-1 { flex: 1 1 0%; }
.nordic-flex-auto { flex: 1 1 auto; }
.nordic-flex-none { flex: none; }
.nordic-grow { flex-grow: 1; }
.nordic-shrink-0 { flex-shrink: 0; }

/* Alignment */
.nordic-items-start { align-items: flex-start; }
.nordic-items-center { align-items: center; }
.nordic-items-end { align-items: flex-end; }
.nordic-items-stretch { align-items: stretch; }
.nordic-items-baseline { align-items: baseline; }

.nordic-justify-start { justify-content: flex-start; }
.nordic-justify-center { justify-content: center; }
.nordic-justify-end { justify-content: flex-end; }
.nordic-justify-between { justify-content: space-between; }
.nordic-justify-around { justify-content: space-around; }

.nordic-self-start { align-self: flex-start; }
.nordic-self-center { align-self: center; }
.nordic-self-end { align-self: flex-end; }

/* Gap */
.nordic-gap-1 { gap: var(--nordic-space-1); }
.nordic-gap-2 { gap: var(--nordic-space-2); }
.nordic-gap-3 { gap: var(--nordic-space-3); }
.nordic-gap-4 { gap: var(--nordic-space-4); }
.nordic-gap-5 { gap: var(--nordic-space-5); }
.nordic-gap-6 { gap: var(--nordic-space-6); }
.nordic-gap-8 { gap: var(--nordic-space-8); }

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

/* Margin */
.nordic-m-0 { margin: 0; }
.nordic-m-1 { margin: var(--nordic-space-1); }
.nordic-m-2 { margin: var(--nordic-space-2); }
.nordic-m-3 { margin: var(--nordic-space-3); }
.nordic-m-4 { margin: var(--nordic-space-4); }
.nordic-m-5 { margin: var(--nordic-space-5); }
.nordic-m-6 { margin: var(--nordic-space-6); }
.nordic-m-8 { margin: var(--nordic-space-8); }
.nordic-m-auto { margin: auto; }

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

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

.nordic-ml-0 { margin-left: 0; }
.nordic-ml-1 { margin-left: var(--nordic-space-1); }
.nordic-ml-2 { margin-left: var(--nordic-space-2); }
.nordic-ml-3 { margin-left: var(--nordic-space-3); }
.nordic-ml-4 { margin-left: var(--nordic-space-4); }
.nordic-ml-auto { margin-left: auto; }

.nordic-mr-0 { margin-right: 0; }
.nordic-mr-1 { margin-right: var(--nordic-space-1); }
.nordic-mr-2 { margin-right: var(--nordic-space-2); }
.nordic-mr-3 { margin-right: var(--nordic-space-3); }
.nordic-mr-4 { margin-right: var(--nordic-space-4); }
.nordic-mr-auto { margin-right: auto; }

.nordic-mx-auto { margin-left: auto; margin-right: auto; }

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

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

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

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

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

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

.nordic-w-full { width: 100%; }
.nordic-w-auto { width: auto; }
.nordic-w-screen { width: 100vw; }
.nordic-max-w-full { max-width: 100%; }
.nordic-max-w-screen { max-width: 100vw; }

.nordic-h-full { height: 100%; }
.nordic-h-auto { height: auto; }
.nordic-h-screen { height: 100vh; }
.nordic-min-h-screen { min-height: 100vh; }

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

.nordic-border { border: 1px solid var(--nordic-border-light); }
.nordic-border-t { border-top: 1px solid var(--nordic-border-light); }
.nordic-border-b { border-bottom: 1px solid var(--nordic-border-light); }
.nordic-border-l { border-left: 1px solid var(--nordic-border-light); }
.nordic-border-r { border-right: 1px solid var(--nordic-border-light); }

.nordic-border-medium { border-color: var(--nordic-border-medium); }
.nordic-border-strong { border-color: var(--nordic-border-strong); }

.nordic-rounded-none { border-radius: var(--nordic-radius-none); }
.nordic-rounded-sm { border-radius: var(--nordic-radius-sm); }
.nordic-rounded { border-radius: var(--nordic-radius-md); }
.nordic-rounded-lg { border-radius: var(--nordic-radius-lg); }
.nordic-rounded-xl { border-radius: var(--nordic-radius-xl); }
.nordic-rounded-2xl { border-radius: var(--nordic-radius-2xl); }
.nordic-rounded-3xl { border-radius: var(--nordic-radius-3xl); }
.nordic-rounded-full { border-radius: var(--nordic-radius-full); }

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

.nordic-bg-base { background-color: var(--nordic-bg-base); }
.nordic-bg-surface { background-color: var(--nordic-bg-surface); }
.nordic-bg-warm { background-color: var(--nordic-bg-warm); }
.nordic-bg-elevated { background-color: var(--nordic-bg-elevated); }
.nordic-bg-primary { background-color: var(--nordic-primary); }
.nordic-bg-primary-subtle { background-color: var(--nordic-primary-subtle); }
.nordic-bg-accent { background-color: var(--nordic-accent); }
.nordic-bg-accent-subtle { background-color: var(--nordic-accent-subtle); }
.nordic-bg-success-subtle { background-color: var(--nordic-success-bg); }
.nordic-bg-warning-subtle { background-color: var(--nordic-warning-bg); }
.nordic-bg-error-subtle { background-color: var(--nordic-error-bg); }

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

.nordic-shadow-none { box-shadow: none; }
.nordic-shadow-xs { box-shadow: var(--nordic-shadow-xs); }
.nordic-shadow-sm { box-shadow: var(--nordic-shadow-sm); }
.nordic-shadow { box-shadow: var(--nordic-shadow-md); }
.nordic-shadow-lg { box-shadow: var(--nordic-shadow-lg); }
.nordic-shadow-xl { box-shadow: var(--nordic-shadow-xl); }

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

.nordic-relative { position: relative; }
.nordic-absolute { position: absolute; }
.nordic-fixed { position: fixed; }
.nordic-sticky { position: sticky; }

.nordic-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.nordic-top-0 { top: 0; }
.nordic-right-0 { right: 0; }
.nordic-bottom-0 { bottom: 0; }
.nordic-left-0 { left: 0; }

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

.nordic-overflow-auto { overflow: auto; }
.nordic-overflow-hidden { overflow: hidden; }
.nordic-overflow-visible { overflow: visible; }
.nordic-overflow-scroll { overflow: scroll; }
.nordic-overflow-x-auto { overflow-x: auto; }
.nordic-overflow-y-auto { overflow-y: auto; }

/* =============================================
   VISIBILITY & INTERACTION
   ============================================= */

.nordic-visible { visibility: visible; }
.nordic-invisible { visibility: hidden; }
.nordic-opacity-0 { opacity: 0; }
.nordic-opacity-50 { opacity: 0.5; }
.nordic-opacity-100 { opacity: 1; }

.nordic-pointer-events-none { pointer-events: none; }
.nordic-pointer-events-auto { pointer-events: auto; }
.nordic-cursor-pointer { cursor: pointer; }
.nordic-cursor-default { cursor: default; }
.nordic-select-none { user-select: none; }
.nordic-select-all { user-select: all; }

/* =============================================
   FOCUS STATES
   ============================================= */

.nordic-focus-ring:focus {
  outline: none;
  box-shadow: var(--nordic-shadow-focus);
}

.nordic-focus-ring:focus:not(:focus-visible) {
  box-shadow: none;
}

.nordic-focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--nordic-shadow-focus);
}

/* =============================================
   TRUNCATION
   ============================================= */

.nordic-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nordic-line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nordic-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nordic-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================
   CUSTOM SCROLLBAR
   ============================================= */

.nordic-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--nordic-border-medium) transparent;
}

.nordic-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.nordic-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--nordic-radius-full);
}

.nordic-scrollbar::-webkit-scrollbar-thumb {
  background: var(--nordic-border-medium);
  border-radius: var(--nordic-radius-full);
  transition: background var(--nordic-duration-fast);
}

.nordic-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--nordic-text-muted);
}

/* Hide scrollbar but keep functionality */
.nordic-scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nordic-scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* =============================================
   SCREEN READER ONLY
   ============================================= */

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

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

@media (max-width: 640px) {
  .nordic-sm\:hidden { display: none; }
  .nordic-sm\:block { display: block; }
  .nordic-sm\:flex { display: flex; }
  .nordic-sm\:flex-col { flex-direction: column; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .nordic-md\:hidden { display: none; }
  .nordic-md\:block { display: block; }
  .nordic-md\:flex { display: flex; }
}

@media (min-width: 1025px) {
  .nordic-lg\:hidden { display: none; }
  .nordic-lg\:block { display: block; }
  .nordic-lg\:flex { display: flex; }
}

/* =============================================
   PRINT STYLES
   ============================================= */

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