/* ==========================================================================
   Talea CV — designtokens
   Formspråk: riktning B. Loggans mjuka geometri, plommon som yta och en varm
   sand som bryter av. Appen är Talea; dokumenten är kandidatens.
   ========================================================================== */

:root {
  /* --- plommon: varumärkets bärande färg -------------------------------- */
  --plum-900: #2C0538;
  --plum-850: #3A0849;
  --plum-800: #4A0B5E;   /* huvudton – rail, topbar, primärknapp           */
  --plum-700: #5C1373;
  --plum-600: #722A8B;
  --plum-500: #8B4BA1;
  --plum-400: #A876BB;
  --plum-300: #C6A3D4;
  --plum-200: #E0C9E9;
  --plum-100: #F0E4F5;
  --plum-050: #F8F3FA;

  /* --- sand: den varma motvikten --------------------------------------- */
  --sand-700: #8A5A22;
  --sand-600: #C98A3C;
  --sand-300: #E8C99B;
  --sand-100: #F7EEE0;

  /* --- neutraler, plumtonade ------------------------------------------- */
  --ink-900: #1B1420;
  --ink-800: #291F2F;
  --ink-700: #3F3347;
  --ink-600: #5C5065;
  --ink-500: #7C7085;
  --ink-400: #9F94A7;
  --ink-300: #C6BECC;
  --ink-200: #E4DDE8;
  --ink-150: #EEE9F1;
  --ink-100: #F5F1F7;
  --ink-050: #FBF8FC;
  --white: #FFFFFF;

  /* --- status ---------------------------------------------------------- */
  --ok:    #2A6A52;
  --warn:  var(--sand-700);
  --danger:#A8302A;

  /* --- ytor ------------------------------------------------------------ */
  --canvas: var(--ink-050);
  --surface: var(--white);
  --line: var(--ink-200);
  --line-soft: var(--ink-150);

  /* mörka ytor: plommon, inte svart */
  --dark:       var(--plum-850);
  --dark-soft:  #4E1063;
  --dark-line:  #63237A;
  --dark-text:  #F4EAF8;
  --dark-muted: #C3A5D0;

  /* --- typografi ------------------------------------------------------- */
  --font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-xs:   0.6875rem;
  --t-sm:   0.8125rem;
  --t-base: 0.875rem;
  --t-md:   1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.25rem;

  /* --- rum ------------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* --- form: mjukare än tidigare, i loggans anda ----------------------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- djup ------------------------------------------------------------ */
  --sh-1: 0 1px 2px rgba(44, 5, 56, .06), 0 1px 1px rgba(44, 5, 56, .04);
  --sh-2: 0 2px 6px rgba(44, 5, 56, .07), 0 6px 16px rgba(44, 5, 56, .06);
  --sh-3: 0 10px 30px rgba(44, 5, 56, .12), 0 2px 8px rgba(44, 5, 56, .06);
  --sh-4: 0 24px 60px rgba(44, 5, 56, .16), 0 4px 12px rgba(44, 5, 56, .07);

  /* --- rörelse --------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: 120ms;
  --med: 220ms;

  /* --- mått ------------------------------------------------------------ */
  --rail-w: 250px;
  --form-w: 46%;
  --topbar-h: 62px;

  /* A4 i px vid 96 dpi */
  --a4-w: 794px;
  --a4-h: 1123px;

  /* --- bakåtkompatibla alias (används på ett fåtal ställen) ------------- */
  --brand-700: var(--plum-800);
  --brand-600: var(--plum-700);
  --brand-500: var(--plum-600);
  --brand-400: var(--plum-500);
  --brand-300: var(--plum-400);
  --brand-200: var(--plum-200);
  --brand-100: var(--plum-100);
  --brand-050: var(--plum-050);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}