@import url("./brand-logo.css");

/* ══════════════════════════════════════════════════════════════
   BrickFlow – Design Tokens  (v2)

   ARKITEKTUR — två lager:

   1. PRIMITIVES  — råa skalvärden, aldrig använda direkt i CSS
      --primitive-gray-900, --primitive-blue-500 …

   2. SEMANTIC ALIASES — det du faktiskt refererar i all CSS
      --color-text-primary, --color-border, --space-4 …

   FÖR ATT BYTA TEMA: ändra bara alias-lagret så att det pekar
   på andra primitiver. Resten av koden rör sig inte.

   ══════════════════════════════════════════════════════════════
   MAPPING — gammal hårdkodad hex → ny alias-token
   ══════════════════════════════════════════════════════════════

   #111827  →  --color-bg-topbar      (topbar, rubriktext)
   #1F2937  →  --color-bg-topbar-border
   #374151  →  --color-text-secondary
   #4B5563  →  --color-text-tertiary
   #6B7280  →  --color-text-muted
   #9CA3AF  →  --color-text-disabled
   #D1D5DB  →  --color-border-input
   #E5E7EB  →  --color-border
   #F1F5F9  →  --color-border-subtle
   #F3F4F6  →  --color-bg-subtle
   #F9FAFB  →  --color-bg-muted
   #F8F8F6  →  --color-bg-app
   #FFFFFF  →  --color-bg-surface
   #FAFAFA  →  --color-bg-surface-2

   #1B4B8A  →  --color-brand
   #163D71  →  --color-brand-dark
   #0F2D56  →  --color-brand-darker
   #EEF3FB  →  --color-brand-subtle

   #DC2626  →  --color-status-error
   #EF4444  →  --color-status-error-mid
   #FEE2E2  →  --color-status-error-bg
   #FEF2F2  →  --color-status-error-bg-light
   #1D4ED8  →  --color-status-info
   #3B82F6  →  --color-status-info-mid
   #DBEAFE  →  --color-status-info-bg
   #065F46  →  --color-status-success
   #059669  →  --color-status-success-mid
   #D1FAE5  →  --color-status-success-bg
   #92400E  →  --color-status-warning
   #F59E0B  →  --color-status-warning-mid
   #FEF3C7  →  --color-status-warning-bg
   #5B21B6  →  --color-status-purple
   #EDE9FE  →  --color-status-purple-bg
   #166534  →  --color-status-green-dark   (jobb: active)
   #DCFCE7  →  --color-status-green-light  (jobb: active bg)

   ══════════════════════════════════════════════════════════════ */

:root {

  /* ────────────────────────────────────────────────────────────
     LAGER 1 — PRIMITIVES
     Aldrig referera dessa direkt i components/views/layout.
     ────────────────────────────────────────────────────────────  */

  /* Grå-skala */
  --primitive-gray-950: #030712;
  --primitive-gray-900: #111827;
  --primitive-gray-800: #1F2937;
  --primitive-gray-700: #374151;
  --primitive-gray-600: #4B5563;
  --primitive-gray-500: #6B7280;
  --primitive-gray-400: #9CA3AF;
  --primitive-gray-300: #D1D5DB;
  --primitive-gray-200: #E5E7EB;
  --primitive-gray-150: #F1F5F9;
  --primitive-gray-100: #F3F4F6;
  --primitive-gray-50:  #F9FAFB;

  /* Varumärke */
  --primitive-brand-900: #0F2D56;
  --primitive-brand-700: #163D71;
  --primitive-brand-500: #1B4B8A;
  --primitive-brand-100: #EEF3FB;

  /* Status-färger */
  --primitive-red-700:   #DC2626;
  --primitive-red-500:   #EF4444;
  --primitive-red-200:   #FECACA;
  --primitive-red-100:   #FEE2E2;
  --primitive-red-50:    #FEF2F2;

  --primitive-blue-700:  #1D4ED8;
  --primitive-blue-500:  #3B82F6;
  --primitive-blue-100:  #DBEAFE;

  --primitive-green-900: #065F46;
  --primitive-green-800: #166534;
  --primitive-green-500: #059669;
  --primitive-green-100: #D1FAE5;
  --primitive-green-50:  #DCFCE7;

  --primitive-yellow-800:#92400E;
  --primitive-yellow-500:#F59E0B;
  --primitive-yellow-100:#FEF3C7;

  --primitive-purple-800:#5B21B6;
  --primitive-purple-100:#EDE9FE;

  /* Neutral */
  --primitive-white: #FFFFFF;
  --primitive-app-bg: #F8F8F6;
  --primitive-surface-2: #FAFAFA;


  /* ────────────────────────────────────────────────────────────
     LAGER 2 — SEMANTIC ALIASES
     Det enda du ska referera i components.css / layout.css / views.css
     ────────────────────────────────────────────────────────────  */

  /* — Bakgrunder — */
  --color-bg-app:           var(--primitive-app-bg);        /* Appens yttersta yta */
  --color-bg-preview:       #EAECF0;                        /* PDF-förhandsgranskningsruta */
  --color-bg-surface:       var(--primitive-white);         /* Kort, modaler, paneler */
  --color-bg-surface-2:     var(--primitive-surface-2);     /* Modal footer, sekundär yta */
  --color-bg-muted:         var(--primitive-gray-50);       /* Tabellhuvud, hover-rader */
  --color-bg-subtle:        var(--primitive-gray-100);      /* Inaktiva chips, badges */
  --color-bg-topbar:        var(--primitive-gray-900);      /* Topbar */
  --color-bg-topbar-border: var(--primitive-gray-800);      /* Topbar nederkant */

  /* — Text — */
  --color-text-primary:     var(--primitive-gray-900);      /* Rubriker, body */
  --color-text-secondary:   var(--primitive-gray-700);      /* Knappar, etiketter */
  --color-text-tertiary:    var(--primitive-gray-600);      /* Detaljer, metadata */
  --color-text-muted:       var(--primitive-gray-500);      /* Hjälptext, placeholders */
  --color-text-disabled:    var(--primitive-gray-400);      /* Ikoner, inaktivt */
  --color-text-inverse:     var(--primitive-white);         /* Vit text på mörk/brand-yta */

  /* — Kanter / borders — */
  --color-border:           var(--primitive-gray-200);      /* Standard dividers, kanter */
  --color-border-subtle:    var(--primitive-gray-150);      /* Interna separator-linjer */
  --color-border-input:     var(--primitive-gray-300);      /* Input-fält */

  /* — Varumärke — */
  --color-brand:            var(--primitive-brand-500);     /* Primärknapp, aktiv nav */
  --color-brand-dark:       var(--primitive-brand-700);     /* Hover på brand */
  --color-brand-darker:     var(--primitive-brand-900);     /* Active/pressed */
  --color-brand-subtle:     var(--primitive-brand-100);     /* Aktiv sidebar-rad */
  --color-brand-focus:      rgba(27, 75, 138, 0.12);        /* Fokusring */

  /* — Status: error/danger/overdue — */
  --color-status-error:     var(--primitive-red-700);
  --color-status-error-mid: var(--primitive-red-500);
  --color-status-error-bg:  var(--primitive-red-100);
  --color-status-error-bg-light: var(--primitive-red-50);
  --color-status-error-border: var(--primitive-red-200);

  /* — Status: info/sent/planned — */
  --color-status-info:      var(--primitive-blue-700);
  --color-status-info-mid:  var(--primitive-blue-500);
  --color-status-info-bg:   var(--primitive-blue-100);

  /* — Status: success/paid/approved — */
  --color-status-success:   var(--primitive-green-900);
  --color-status-success-mid: var(--primitive-green-500);
  --color-status-success-bg: var(--primitive-green-100);

  /* — Status: warning/pending — */
  --color-status-warning:   var(--primitive-yellow-800);
  --color-status-warning-mid: var(--primitive-yellow-500);
  --color-status-warning-bg: var(--primitive-yellow-100);

  /* — Status: purple/invoiced — */
  --color-status-purple:    var(--primitive-purple-800);
  --color-status-purple-bg: var(--primitive-purple-100);

  /* — Status: active job (grön) — */
  --color-status-green-dark:  var(--primitive-green-800);
  --color-status-green-light: var(--primitive-green-50);


  /* ────────────────────────────────────────────────────────────
     BAKÅTKOMPATIBILITET
     Gamla tokens som används i befintlig kod — pekar på aliases.
     Ta bort en i taget när koden är uppdaterad.
     ────────────────────────────────────────────────────────────  */
  --bg:      var(--color-bg-app);
  --surface: var(--color-bg-surface);
  --text:    var(--color-text-primary);
  --muted:   var(--color-text-muted);
  --line:    var(--color-border);
  --brand:   var(--color-brand);


  /* ────────────────────────────────────────────────────────────
     TYPSNITT
     ────────────────────────────────────────────────────────────  */
  --font-sans:  Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-brand: 'Syne', 'Inter', sans-serif;
  --font-doc:   'Plus Jakarta Sans', sans-serif;

  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-black:  800;

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.55;
  --leading-loose:  1.75;


  /* ────────────────────────────────────────────────────────────
     AVSTÅND
     ────────────────────────────────────────────────────────────  */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  20px;
  --space-9:  24px;
  --space-10: 32px;
  --space-11: 40px;
  --space-12: 48px;
  --space-13: 64px;


  /* ────────────────────────────────────────────────────────────
     FORM
     ────────────────────────────────────────────────────────────  */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-3xl:  16px;
  --radius-full: 9999px;


  /* ────────────────────────────────────────────────────────────
     SKUGGOR
     ────────────────────────────────────────────────────────────  */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:    0 16px 40px rgba(0,0,0,0.14);
  --shadow-2xl:   0 20px 60px rgba(0,0,0,0.20);
  --shadow-popup: 0 18px 44px rgba(16,24,40,0.18), 0 4px 12px rgba(16,24,40,0.08);


  /* ────────────────────────────────────────────────────────────
     ÖVERGÅNGAR
     ────────────────────────────────────────────────────────────  */
  --transition-fast: 0.10s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;


  /* ────────────────────────────────────────────────────────────
     LAYOUT
     ────────────────────────────────────────────────────────────  */
  --topbar-h:   56px;
  --sidebar-w:  220px;
  --modal-max:  640px;

  --z-topbar:   100;
  --z-sidebar:  150;
  --z-modal:    1000;
  --z-popup:    1200;
  --z-toast:    2000;
}


/* ── Global reset ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--color-text-primary);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}