/* ==========================================================================
   STERK CRM — Design Tokens
   Single source of truth for colors, typography, spacing, borders, shadows, motion.
   Use tokens (var(--x)) instead of hardcoded values. If you need a new value,
   add it here first.
   ========================================================================== */

:root {
  /* ── Brand ─────────────────────────────────────────────────────
     STERK teal-hierarki. sterk-dark = primary brand, sterk-blue = accent,
     sterk-red = signature red (logo), sterk-muted = brand gray.

     Adopsjon (#170 build:assets): brand-fargene aliaserer nå inn fra
     @sterk/tokens/crm.css som loades først i index.html. Endring i
     @sterk/tokens/crm.css forplanter seg automatisk hit. Lokal hex-kode
     beholdes som fallback hvis @sterk/tokens ikke er loaded.
  */
  --color-brand-dark:   var(--brand-crm-primary, #024250);   /* hero CTA, nav-active */
  --color-brand-blue:   var(--brand-crm-accent,  #0384a0);   /* links, data-fill, accent */
  --color-brand-red:    #e95546;   /* logo "E", sjeldent brukt i UI */
  --color-brand-muted:  #9bb3b8;   /* brand-kompatibel gray */

  /* ── Nøytral gråskala ──────────────────────────────────────────
     Editorial light theme. Bruk disse istedenfor tilfeldige hex-grå.
  */
  --color-grey-50:  #fafaf8;   /* subtle card hover */
  --color-grey-100: #f7f7f5;   /* page background */
  --color-grey-200: #eeeeee;   /* divider, soft border */
  --color-grey-300: #e8e8e8;   /* standard border */
  --color-grey-400: #d0d0d0;   /* input border, chip border */
  --color-grey-500: #9ca3af;   /* placeholder, disabled */
  --color-grey-600: #6b6b6b;   /* secondary text (WCAG AA) */
  --color-grey-700: #4a4a4a;   /* body-strong */
  --color-grey-900: #2d2d2d;   /* primary ink */

  /* ── Semantic ──────────────────────────────────────────────────
     Mutet palett. Loud varianter eksisterer ikke — drop dem.
  */
  --color-success: #2d8a6e;   /* OK, grønn KPI-trend, positive delta */
  --color-warning: #d4a843;   /* amber, gul/oransje varsler samles her */
  --color-danger:  #c0392b;   /* rødt, kritisk, feilmeldinger, destruktiv CTA */
  --color-info:    #0384a0;   /* info-tonen = brand-blue */

  /* ── Surface & text (semantic aliases) ──────────────────────── */
  --color-bg:          var(--color-grey-100);   /* page */
  --color-surface:     #ffffff;                 /* cards, panels */
  --color-surface-alt: var(--color-grey-200);   /* muted surface, chips */
  --color-border:      var(--color-grey-300);
  --color-border-soft: var(--color-grey-200);
  --color-text:        var(--color-grey-900);
  --color-text-muted:  var(--color-grey-600);
  --color-text-subtle: var(--color-grey-500);

  /* ── Typography ────────────────────────────────────────────────
     Editorial skala. Outfit er det eneste fonten.
     Weight: 300 thin (KPI), 400 regular (body), 500 medium (titler), 600 strong.
  */
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-tiny:  11px;   /* micro-labels, tracking 2px uppercase */
  --font-size-small: 12px;   /* muted hints, metadata */
  --font-size-body:  13px;   /* body tekst */
  --font-size-lead:  15px;   /* lead paragraph, card-title */
  --font-size-title: 18px;   /* page title (toolbar-title) */
  --font-size-hero:  28px;   /* KPI value, stor display */

  --line-height-tight: 1.2;
  --line-height-body:  1.5;

  --letter-spacing-tight:  -0.2px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.5px;
  --letter-spacing-label:  2px;    /* for uppercase micro-labels */

  /* ── Spacing (4-base skala) ─────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Borders ─────────────────────────────────────────────────── */
  --radius-0:   0;       /* editorial default */
  --radius-sm:  2px;     /* kalender-event, svært subtile */
  --radius-md:  4px;     /* badge, små kort */
  --radius-lg:  8px;     /* sjelden, dropdowns */
  --radius-pill: 999px;  /* pill-form */

  --border-width: 1px;

  /* ── Shadows (subtle elevation) ─────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);           /* kort, lav heving */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);          /* dropdown, menu */
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);          /* modal */
  --shadow-panel: -4px 0 16px rgba(0, 0, 0, 0.06);      /* detail-panel */

  /* ── Motion ──────────────────────────────────────────────────── */
  --duration-instant: 150ms;
  --duration-fast:    200ms;
  --duration-normal:  300ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  /* ── Layout ──────────────────────────────────────────────────── */
  --sidebar-width: 240px;
  --detail-panel-width: 480px;
  --content-padding-x: 40px;
  --content-padding-y: 32px;

  /* ── Focus ──────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--color-brand-blue);
  --focus-ring-offset: 2px;

  /* ── Legacy-aliaser (ikke bruk i ny kode) ────────────────────
     Eksisterende CSS/JS refererer disse navnene. Beholder aliaser
     som peker til de nye tokenene — slettes når refactor er ferdig. */
  --sterk-dark:   var(--color-brand-dark);
  --sterk-blue:   var(--color-brand-blue);
  --sterk-red:    var(--color-brand-red);
  --sterk-black:  #1c1c1b;
  --sterk-muted:  var(--color-brand-muted);
  --sterk-bg:     #f7f9fc;
  --bg-primary:   var(--color-bg);
  --bg-secondary: var(--color-surface);
  --bg-tertiary:  var(--color-surface-alt);
  --border:       var(--color-border);
  --text-primary:   var(--color-text);
  --text-secondary: var(--color-text-muted);
  --accent:       var(--color-brand-blue);
  --green:        var(--color-success);
  --red:          var(--color-danger);
  --orange:       #e67e22;         /* deprecated — bruk --color-warning */
  --yellow:       var(--color-warning);
  --purple:       #9b59b6;         /* deprecated — ikke i bruk */
  --blue:         var(--color-info);
  --font:         var(--font-family);
}