/* ==========================================================================
   Designtokens
   --------------------------------------------------------------------------
   Grundlager för moderniseringen. Innehåller enbart variabler - inga
   selektorer som ritar något. Laddas efter temats CSS i layouts/pages.blade.php.

   Färgerna är HÄRLEDDA UR det befintliga temat, inte nyvalda: statusfärgerna
   är exakt de värden som .bg-color-* redan använder, så en faktura som var
   orange igår är orange idag. Det som moderniseras är formen - spacing,
   typografi, radier, skuggor och fokusmarkering.
   ========================================================================== */

:root {
    /* --- Statusfärger: exakta värden ur hiinvoice-production.min.css ------ */
    --status-red:       #fb3c4a;  /* försenad, påminnelse            */
    --status-blue:      #57889c;  /* obetald, delbetald              */
    --status-orange:    #c79121;  /* ej skickad                      */
    --status-green:     #356e35;  /* betald                          */
    --status-grey:      #404040;  /* krediterad                      */
    --status-slate:     #4c4f53;  /* kreditfaktura                   */

    /* Mörkare varianter för text på ljus botten. De solida badgarna har
       svag kontrast mot vitt (orange ~2.6:1, röd ~3.4:1 - under WCAG AA).
       Tonade badgar med mörk text löser det utan att byta färgidentitet. */
    --status-red-ink:    #a3131f;
    --status-blue-ink:   #2e5768;
    --status-orange-ink: #7a5804;
    --status-green-ink:  #2a562a;
    --status-grey-ink:   #333333;
    --status-slate-ink:  #33363a;

    /* Tonade bottnar, samma kulör med låg mättnad */
    --status-red-bg:    #fdecee;
    --status-blue-bg:   #eaf1f4;
    --status-orange-bg: #fbf2dd;
    --status-green-bg:  #e9f1e9;
    --status-grey-bg:   #eeeeee;
    --status-slate-bg:  #ecedee;

    /* --- Varumärke: temats befintliga primärfärg ------------------------- */
    --brand:            #3276b1;  /* .btn-primary i temat              */
    --brand-hover:      #2b6597;
    --brand-ink:        #20567f;
    --brand-soft:       #eaf2f8;
    --header-bg:        #222222;  /* #header i temat                   */

  /* Applikationsskalet (sidomeny + topbar). Egna tokens - resten av
     paletten ar oforandrad, sa knappar och statusfarger pa sidorna
     ligger kvar dar de var. */
  --shell-bg:           #f4f6f8;  /* ytan bakom innehallet             */
  --sidebar-bg:         #ebf0f2;
  --sidebar-hover:      rgba(0,0,0,.04);
  --sidebar-active:     rgba(0,0,0,.06);
  --sidebar-sub-active: #dbe7eb;
  --brand-deep:         #1e4d58;  /* ordmarke och aktiv undermenypost  */
  --avatar-bg:          #a7f3d0;
  --avatar-ink:         #065f46;

    /* --- Neutralskala: saknas helt i temat, behövs för modern form ------- */
    --n-0:   #ffffff;
    --n-25:  #fafbfc;
    --n-50:  #f5f6f8;
    --n-100: #eceef1;
    --n-200: #dfe2e7;
    --n-300: #c6cbd3;
    --n-400: #9aa1ac;
    --n-500: #6b7280;
    --n-600: #4b5563;
    --n-700: #374151;
    --n-800: #232a35;
    --n-900: #141a22;

    --surface:        var(--n-0);
    --surface-sunken: var(--n-50);
    --border:         var(--n-200);
    --border-strong:  var(--n-300);
    --text:           var(--n-800);

    /* Dampad text lag pa --n-500 (#6b7280). Mot vitt gav det 4,83:1 och klarade
       WCAG AA, men mot --surface-sunken (#f5f6f8) bara 4,47:1 - strax under
       gransen 4,5:1. Den kombinationen ar inte ovanlig: den ar varje tabellhuvud
       i applikationen, plus all dampad text i en hovrad rad.

       --n-600 (#4b5563) ger 6,99:1 mot sunken och 7,56:1 mot vitt. Texten blir
       nagot morkare overallt dar --text-muted anvands, men skillnaden mot
       --text (--n-800) racker fortfarande gott for att lasa den som sekundar. */
    --text-muted:     var(--n-600);

    /* --- Spacing: 4 px-skala. Bootstrap 3 har inga spacing-utilities ----- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;

    /* --- Typografi: Open Sans laddas redan av layouten ------------------- */
    --font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  
/* Typografiskalan hojdes fran 11/12/13/15/18/24/30 till 12/14/16/18/20/24/30
   nar rem-basen sattes till 16px. Skalan harleddes ursprungligen ur
   Bootstraps body{font-size:13px}; med Tailwind-lagret pa 16px hade
   designlagret annars ritat knappar, etiketter och tabeller markant mindre
   an innehallet bredvid. Bada lagren lases nu fran samma skala. */
  --text-xs:   12px;
    --text-sm:   14px;
    --text-base: 16px;
    --text-md:   18px;
    --text-lg:   20px;
    --text-xl:   24px;
    --text-2xl:  30px;

    --leading-tight:  1.25;
    --leading-normal: 1.5;

    --weight-normal:   400;
    --weight-medium:   600;
    --weight-bold:     700;

    /* Siffror i tabeller ska ligga i kolumn - tabular figures */
    --numeric: "tnum" 1, "lnum" 1;

    /* --- Form ------------------------------------------------------------ */
    --radius-sm: 3px;
    --radius:    5px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(20, 26, 34, .06);
    --shadow:    0 1px 3px rgba(20, 26, 34, .08), 0 1px 2px rgba(20, 26, 34, .04);
    --shadow-md: 0 4px 12px rgba(20, 26, 34, .10);
    --shadow-lg: 0 12px 32px rgba(20, 26, 34, .16);

    --focus-ring: 0 0 0 3px rgba(50, 118, 177, .35);

    --speed: 120ms;
}

/* Respektera användarens rörelseinställning. */
@media (prefers-reduced-motion: reduce) {
    :root { --speed: 0ms; }
}

/* --------------------------------------------------------------------------
   rem-basen
   --------------------------------------------------------------------------

   Bootstrap 3 satter html{font-size:10px}. Det ar en rest fran BS3:s egen
   uppbyggnad - varken Bootstrap, temat, custom.css, designlagret eller
   nagon av de per-sida laddade stilmallarna anvander en enda rem. Enda
   filen som gor det ar app-tailwind.css, med 106 varden.

   Foljden var att HELA Tailwind-lagret ritades i 62,5 % skala:
   tw-text-base blev 10px i stallet for 16, tw-w-60 pa sidomenyn 150px i
   stallet for 240, och topbarens tw-h-16 40px i stallet for 64.

   Basen satts darfor till 16px. Eftersom ingen annan fil anvander rem
   paverkar det ingenting utanfor Tailwind.
   -------------------------------------------------------------------------- */

html { font-size: 16px; }