/* ===========================================================================
   PURPLEPOINT CRM – DESIGNTOKENS
   Grunden i den grafiska profilen. Ändra färg eller typografi HÄR, aldrig
   i enskilda komponenter.

   Profil:  Lila #703A91 · Orange #FDB812 · Grå #808285 · Text #888A80
   Typsnitt: Brandon Grotesque (tryck) / Darker Grotesque (skärm, medlevererad)
   ======================================================================== */

/* --- Typsnitt ----------------------------------------------------------- */
@font-face { font-family:'Darker Grotesque'; src:url('/static/fonts/DarkerGrotesque-Light.ttf') format('truetype');     font-weight:300; font-display:swap; }
@font-face { font-family:'Darker Grotesque'; src:url('/static/fonts/DarkerGrotesque-Regular.ttf') format('truetype');   font-weight:400; font-display:swap; }
@font-face { font-family:'Darker Grotesque'; src:url('/static/fonts/DarkerGrotesque-Medium.ttf') format('truetype');    font-weight:500; font-display:swap; }
@font-face { font-family:'Darker Grotesque'; src:url('/static/fonts/DarkerGrotesque-SemiBold.ttf') format('truetype');  font-weight:600; font-display:swap; }
@font-face { font-family:'Darker Grotesque'; src:url('/static/fonts/DarkerGrotesque-Bold.ttf') format('truetype');      font-weight:700; font-display:swap; }
@font-face { font-family:'Darker Grotesque'; src:url('/static/fonts/DarkerGrotesque-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Darker Grotesque'; src:url('/static/fonts/DarkerGrotesque-Black.ttf') format('truetype');     font-weight:900; font-display:swap; }

:root{
  /* Typografi
     Darker Grotesque är ett smalt display-typsnitt – snyggt i rubriker,
     logotyp och siffror, men svårläst i tät tabelltext. Därför två stackar. */
  --font-display:'Darker Grotesque', 'Brandon Grotesque', system-ui, sans-serif;
  --font-body:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  --font-mono:'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px;
  --fs-lg:16px; --fs-xl:19px; --fs-2xl:24px; --fs-3xl:32px; --fs-4xl:42px;

  /* Varumärkeslila */
  --pp-50:#F9F6FB;  --pp-100:#F1E9F6; --pp-200:#E1CEEC; --pp-300:#C6A6D9;
  --pp-400:#A87BC4; --pp-500:#8B54AC; --pp-600:#703A91; /* PROFILENS LILA */
  --pp-700:#5C2E78; --pp-800:#48245E; --pp-900:#331A43;

  /* Orange (profil) */
  --or-50:#FFF9EC; --or-100:#FFF0CE; --or-300:#FEDA82;
  --or-500:#FDB812; /* PROFILENS ORANGE */ --or-700:#B47F00; --or-900:#6E4E00;

  /* Neutralt – grunden är profilens gråskala */
  --n-0:#FFFFFF;
  --n-25:#FCFCFB;
  --n-50:#F7F6F4;   /* appens bakgrund */
  --n-100:#F1F0EC;
  --n-200:#E4E3DD;  /* kantlinjer */
  --n-300:#CFCEC7;
  --n-400:#A9A9A1;
  --n-500:#888A80;  /* PROFILENS TEXTGRÅ – sekundär text */
  --n-600:#6E7068;
  --n-700:#54554F;
  --n-800:#3A3B36;
  --n-900:#26261F;  /* primär text */

  /* Semantiskt */
  --ok:#2E7D5B;     --ok-bg:#E9F4EE;   --ok-bd:#BFDFCE;
  --warn:#B47F00;   --warn-bg:#FFF6E3; --warn-bd:#F7DFA6;
  --err:#B3372B;    --err-bg:#FBEBE9;  --err-bd:#EFC5BF;
  --info:#3A6E96;   --info-bg:#EAF2F8; --info-bd:#C3DAEB;

  /* Roll-/statusfärger */
  --st-lead:var(--or-500); --st-prospect:var(--info); --st-customer:var(--ok);
  --st-partner:var(--pp-600); --st-archived:var(--n-400);

  /* Yta och form */
  --bg:var(--n-50);
  --surface:var(--n-0);
  --surface-2:var(--n-100);
  --border:var(--n-200);
  --text:var(--n-900);
  --text-2:var(--n-600);
  --text-3:var(--n-500);

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;

  --sh-xs:0 1px 2px rgba(38,38,31,.05);
  --sh-sm:0 1px 3px rgba(38,38,31,.07), 0 1px 2px rgba(38,38,31,.04);
  --sh-md:0 4px 12px rgba(38,38,31,.08), 0 1px 3px rgba(38,38,31,.05);
  --sh-lg:0 12px 32px rgba(38,38,31,.12), 0 2px 8px rgba(38,38,31,.06);
  --sh-purple:0 6px 20px rgba(112,58,145,.22);

  /* Mått */
  --sidebar-w:248px;
  --sidebar-w-collapsed:68px;
  --topbar-h:60px;
  --brand-h:66px;      /* höjd på logotypraden i sidomenyn */
  --logo-h:34px;       /* logotypens höjd */
  --wave-h:112px;      /* vågens höjd i sidomenyn */
  --wave-lift:52px;    /* hur högt vågen lyfts över användarkortet */
  --gap:16px;

  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.12s var(--ease);
  --t:.2s var(--ease);
}