/* ============================================================
   mds-design-tokens.css
   Felles designtokens for hele mds-plattformen.
   Brukes av: mds-hub, HelseCV, mds-hr-assistant, CV-to-ERP.

   Filosofi: én sannhet for farger, typografi, spacing, radius.
   Endrer du en token her, oppdateres alle apper automatisk.

   Versjon: 1.0 — 20. mai 2026
   ============================================================ */

:root {
  /* === FARGER === */

  /* Primær — dyp blå "troverdig profesjonell" */
  --mds-primary:         #0F3552;
  --mds-primary-hover:   #163E5F;
  --mds-primary-light:   #E6EEF4;
  --mds-primary-dark:    #082336;

  /* Accent — teal "klinisk friskhet" */
  --mds-accent:          #2A8090;
  --mds-accent-hover:    #1F6975;
  --mds-accent-light:    #E3F0F2;
  --mds-accent-dark:     #1A5560;

  /* Bakgrunner */
  --mds-bg:              #F5F8FB;
  --mds-surface:         #FFFFFF;
  --mds-surface-2:       #F0F4F8;

  /* Tekst */
  --mds-text:            #1A2330;
  --mds-text-secondary:  #5A6477;
  --mds-text-tertiary:   #8A95A7;
  --mds-text-on-primary: #FFFFFF;

  /* Border */
  --mds-border:          #D8E0E8;
  --mds-border-strong:   #B8C3D0;

  /* Status */
  --mds-success:         #2E7D44;
  --mds-success-bg:      #E6F2EA;
  --mds-warning:         #C77E0F;
  --mds-warning-bg:      #FBF1E5;
  --mds-error:           #B83A3A;
  --mds-error-bg:        #FBEAEA;
  --mds-info:            #2A6BB0;
  --mds-info-bg:         #E5EEF7;

  /* === TYPOGRAFI === */

  --mds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mds-font-mono: 'JetBrains Mono', 'Menlo', monospace;

  --mds-text-xs:   11px;
  --mds-text-sm:   13px;
  --mds-text-base: 14px;
  --mds-text-md:   15px;
  --mds-text-lg:   17px;
  --mds-text-xl:   22px;
  --mds-text-2xl:  28px;
  --mds-text-3xl:  36px;
  --mds-text-4xl:  48px;

  --mds-leading-tight:  1.2;
  --mds-leading-normal: 1.5;
  --mds-leading-relaxed: 1.7;

  /* === RADIUS === */
  --mds-radius-sm:  6px;
  --mds-radius:     10px;
  --mds-radius-lg:  14px;
  --mds-radius-xl:  20px;
  --mds-radius-full: 999px;

  /* === SPACING === */
  --mds-space-1: 4px;
  --mds-space-2: 8px;
  --mds-space-3: 12px;
  --mds-space-4: 16px;
  --mds-space-5: 20px;
  --mds-space-6: 24px;
  --mds-space-8: 32px;
  --mds-space-10: 40px;
  --mds-space-12: 48px;
  --mds-space-16: 64px;
  --mds-space-20: 80px;

  /* === SHADOW === */
  --mds-shadow-sm:  0 1px 2px rgba(15, 53, 82, 0.05);
  --mds-shadow:     0 2px 6px rgba(15, 53, 82, 0.08);
  --mds-shadow-md:  0 4px 14px rgba(15, 53, 82, 0.10);
  --mds-shadow-lg:  0 8px 24px rgba(15, 53, 82, 0.12);
  --mds-shadow-xl:  0 20px 48px rgba(15, 53, 82, 0.18);

  /* === Z-INDEX === */
  --mds-z-dropdown: 50;
  --mds-z-sticky:   100;
  --mds-z-modal:    1000;
  --mds-z-toast:    2000;

  /* === ANIMASJON === */
  --mds-transition:      all 0.15s ease;
  --mds-transition-slow: all 0.3s ease;
}

/* === MØRKEMODUS === */
[data-theme="dark"] {
  --mds-primary:         #5BA8DC;
  --mds-primary-hover:   #7BBDE8;
  --mds-primary-light:   #1B344B;

  --mds-accent:          #4DCEDE;
  --mds-accent-hover:    #6FE0EE;
  --mds-accent-light:    #1A3A42;

  --mds-bg:              #0A1420;
  --mds-surface:         #14253A;
  --mds-surface-2:       #1E2F44;

  --mds-text:            #E5EDF5;
  --mds-text-secondary:  #A0AEC0;
  --mds-text-tertiary:   #6B7785;

  --mds-border:          #2C3E55;
  --mds-border-strong:   #3D5269;

  --mds-success-bg:      #1F3528;
  --mds-warning-bg:      #3A2D17;
  --mds-error-bg:        #3A1F1F;
  --mds-info-bg:         #1B2E45;
}

/* === Bruk dette: system-preference fallback === */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mds-primary:         #5BA8DC;
    --mds-primary-hover:   #7BBDE8;
    --mds-primary-light:   #1B344B;
    --mds-accent:          #4DCEDE;
    --mds-accent-hover:    #6FE0EE;
    --mds-accent-light:    #1A3A42;
    --mds-bg:              #0A1420;
    --mds-surface:         #14253A;
    --mds-surface-2:       #1E2F44;
    --mds-text:            #E5EDF5;
    --mds-text-secondary:  #A0AEC0;
    --mds-text-tertiary:   #6B7785;
    --mds-border:          #2C3E55;
    --mds-border-strong:   #3D5269;
  }
}

/* === Reset / base === */
* { box-sizing: border-box; }
body { font-family: var(--mds-font); }