/* ============================================
   PAJARA OS — Design Tokens
   Based on DESIGN.md (Pajara Core)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Geist:wght@400;500;600&display=swap');

:root {
  /* ── Brand Colors ── */
  --primary:            #162839;
  --primary-container:  #2c3e50;
  --on-primary:         #ffffff;
  --on-primary-container: #96a9be;
  --inverse-primary:    #b5c8df;

  --secondary:          #535f72;
  --on-secondary:       #ffffff;
  --secondary-container:#d7e3fa;
  --on-secondary-container: #596578;

  --tertiary:           #252728;
  --on-tertiary:        #ffffff;
  --tertiary-container: #3a3d3e;

  /* ── Surfaces ── */
  --surface:            #f8f9ff;
  --surface-dim:        #cbdbf5;
  --surface-bright:     #f8f9ff;
  --surface-container-lowest:  #ffffff;
  --surface-container-low:     #eff4ff;
  --surface-container:         #e5eeff;
  --surface-container-high:    #dce9ff;
  --surface-container-highest: #d3e4fe;
  --on-surface:         #0b1c30;
  --on-surface-variant: #43474c;
  --inverse-surface:    #213145;
  --inverse-on-surface: #eaf1ff;

  /* ── Outlines ── */
  --outline:            #74777d;
  --outline-variant:    #c4c6cd;
  --surface-tint:       #4e6073;

  /* ── Status Colors ── */
  --success:            #1a6b3c;
  --success-bg:         #e8f5ee;
  --success-text:       #145530;
  --warning:            #b5651d;
  --warning-bg:         #fef3e6;
  --warning-text:       #8a4d16;
  --error:              #ba1a1a;
  --error-bg:           #ffdad6;
  --error-text:         #93000a;
  --info:               #2563eb;
  --info-bg:            #dbeafe;
  --info-text:          #1e40af;

  /* ── Typography ── */
  --font-display:       'Hanken Grotesk', sans-serif;
  --font-body:          'Inter', sans-serif;
  --font-mono:          'Geist', monospace;

  /* ── Spacing (8px rhythm) ── */
  --space-xs:   4px;
  --space-sm:   12px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   64px;
  --space-base: 8px;

  /* ── Layout ── */
  --container-max:    1440px;
  --gutter:           24px;
  --margin-mobile:    16px;
  --margin-desktop:   32px;
  --sidebar-width:    220px;
  --sidebar-collapsed: 64px;
  --topbar-height:    64px;

  /* ── Border Radius ── */
  --radius-sm:   0.25rem;
  --radius:      0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(22,40,57,0.06);
  --shadow:      0 4px 20px rgba(22,40,57,0.08);
  --shadow-lg:   0 8px 32px rgba(22,40,57,0.12);
  --shadow-card: 0 4px 20px rgba(22,40,57,0.06);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition:        250ms ease;
  --transition-slow:   400ms ease;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  color: var(--on-surface);
  background: var(--surface);
  line-height: 1.5;
}

/* ── Typography Classes ── */
.display-lg {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.display-md {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.headline-lg {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
}

.headline-md {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.headline-sm {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.body-lg {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.body-md {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.body-sm {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.label-lg {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.label-sm {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.metric-value-sm {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ── Mobile Typography ── */
@media (max-width: 768px) {
  .display-lg {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .display-md { font-size: 28px; }
  .headline-lg { font-size: 24px; }
  .headline-md { font-size: 20px; }
  .metric-value { font-size: 28px; }
}