/* PALUSA Grafisk profil 3.0 — 17 oktober 2026
   Steget, hårfint till tungt, full volym och skarpt varumärke med rund produkt.
   .palusa-theme får ljusa roller på Papper. data-theme="dark" byter till Kväll (Kol).
   data-theme="midnight" behåller 2.1:s Midnatt för presentationer och Map My Days kvällsuttryck.
   --gradient-deep är pensionerad i 3.0. Gradienten lever bara i ordmärket och sömmen.
   Varumärkesytor har --radius-brand (0). Produktens UI behåller --radius-product-*.
   --space-1 = 8 px; --space-half = 4 px. Namnen behåller 2.0:s skala. */
:root {
  --palusa-magenta-50: #FDF2F8;
  --palusa-magenta-100: #F7DDEC;
  --palusa-magenta-200: #EBB2D5;
  --palusa-magenta-500: #C0338B;
  --palusa-magenta-700: #8A2464;
  --palusa-magenta-900: #4B193A;
  --palusa-sky-50: #F0F8FD;
  --palusa-sky-100: #DFF1FA;
  --palusa-sky-200: #B1DFF3;
  --palusa-sky-500: #2EAAE1;
  --palusa-sky-700: #0E658D;
  --palusa-sky-900: #123C52;
  --palusa-violet-50: #F5F3FB;
  --palusa-violet-100: #EAE5F6;
  --palusa-violet-200: #CFC6E8;
  --palusa-violet-500: #564797;
  --palusa-violet-700: #403473;
  --palusa-violet-900: #292047;
  --palusa-indigo-50: #F2F5FC;
  --palusa-indigo-100: #E3EAF8;
  --palusa-indigo-200: #BCCBED;
  --palusa-indigo-500: #3F59A5;
  --palusa-indigo-700: #2C407D;
  --palusa-indigo-900: #1E2B50;
  --palusa-green-50: #F3F8F0;
  --palusa-green-100: #E5F0DE;
  --palusa-green-200: #C3DFB7;
  --palusa-green-500: #66B659;
  --palusa-green-700: #366D2D;
  --palusa-green-900: #244621;
  --palusa-red-50: #FFF2F4;
  --palusa-red-100: #FDE0E6;
  --palusa-red-200: #F7B0BD;
  --palusa-red-500: #E62044;
  --palusa-red-700: #AF1733;
  --palusa-red-900: #641B2A;
  --palusa-white: #FFFFFF;
  --palusa-paper: #F7F5F2;
  --palusa-sand: #EEEAE3;
  --palusa-ice: #F3F8FA;
  --palusa-mist: #EEECF0;
  --palusa-line: #D8D4DE;
  --palusa-muted: #6D6576;
  --palusa-ink: #272330;
  --palusa-night: #1C1924;
  --palusa-midnight: #101C36;
  --palusa-coal: #121019;
  --palusa-warning-bg: #FFF4D6;
  --palusa-warning-text: #7A4B00;
  --palusa-input-border: #877F91;

  /* Produktfärger: fem rutor, fem projekt. -on är textfärgen på fältet.
     Map My Day och ShakeLogKit klarar bara stor text på sitt fält (4.4 och 4.3). */
  --palusa-product-studio: #C0338B;
  --palusa-product-studio-on: #FFFFFF;
  --palusa-product-mapmyday: #2EAAE1;
  --palusa-product-mapmyday-on: #123C52;
  --palusa-product-blixtra: #3F59A5;
  --palusa-product-blixtra-on: #FFFFFF;
  --palusa-product-screenshotstudio: #E62044;
  --palusa-product-screenshotstudio-on: #FFFFFF;
  --palusa-product-shakelogkit: #66B659;
  --palusa-product-shakelogkit-on: #244621;
  --palusa-product-srtdownloader: #564797;
  --palusa-product-srtdownloader-on: #FFFFFF;

  /* Tonpar: ljus yta + familjens egen 900. Alla klarar AA för brödtext.
     I ett tonpar vänds knappen: 900 som bakgrund och ytan som text. */
  --pair-magenta-bg: #F7DDEC;
  --pair-magenta-text: #4B193A;
  --pair-sky-bg: #B1DFF3;
  --pair-sky-text: #123C52;
  --pair-violet-bg: #EAE5F6;
  --pair-violet-text: #292047;
  --pair-indigo-bg: #BCCBED;
  --pair-indigo-text: #1E2B50;
  --pair-green-bg: #C3DFB7;
  --pair-green-text: #244621;
  --pair-red-bg: #FDE0E6;
  --pair-red-text: #641B2A;

  --font-display: "Outfit", "Avenir Next", Futura, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Behålls för kompatibilitet med 2.1. */
  --font-brand: var(--font-display);
  --font-code: var(--font-mono);

  --radius-brand: 0;
  --radius-product-control: 0.75rem;
  --radius-product-card: 1rem;
  --radius-product-featured: 1.5rem;
  --radius-pill: 999px;
  /* Alias från 2.1. Pekar på produktradierna; varumärkesytor använder --radius-brand. */
  --radius-control: var(--radius-product-control);
  --radius-card: var(--radius-product-card);
  --radius-featured: var(--radius-product-featured);

  --space-half: 0.25rem;
  --space-1-5: 0.75rem;
  --space-2-5: 1.25rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  /* Steget: mellanrum = 3/8 av rutan. */
  --step-gap-ratio: 0.375;

  /* Ett steg i taget: varumärkets rörelse går hela rutor. Produktens UI behåller 2.1:s tider. */
  --motion-step: 95ms;
  --motion-ui-feedback: 140ms;
  --motion-ui-panel: 220ms;

  /* Sömmen: 2 px under navigering, 4–6 px längs en kant, 8 px för förlopp. Aldrig bakom text. */
  --gradient-seam: linear-gradient(90deg, #C0338B, #2EAAE1);
  /* I 3.0 bara för ordmärket och sömmen. Alias av --gradient-seam. */
  --gradient-signature: var(--gradient-seam);
}
.palusa-theme {
  --color-bg: #F7F5F2;
  --color-surface: #FFFFFF;
  --color-soft: #F7DDEC;
  --color-text: #272330;
  --color-text-secondary: #6D6576;
  --color-link: #8A2464;
  --color-action: #C0338B;
  --color-action-hover: #8A2464;
  --color-on-action: #FFFFFF;
  --color-focus: #8A2464;
  --color-border: #D8D4DE;
  --color-input-border: #877F91;
  --color-field: #C0338B;
  --color-on-field: #FFFFFF;
  --color-success-bg: #E5F0DE;
  --color-success-text: #366D2D;
  --color-error-bg: #FDE0E6;
  --color-error-text: #AF1733;
  --color-info-bg: #DFF1FA;
  --color-info-text: #0E658D;
  --color-warning-bg: #FFF4D6;
  --color-warning-text: #7A4B00;
}
.palusa-theme[data-theme="dark"] {
  --color-bg: #121019;
  --color-surface: #1C1924;
  --color-soft: #2E2A38;
  --color-text: #F7F5F2;
  --color-text-secondary: #A9A3B4;
  --color-link: #EBB2D5;
  --color-action: #C0338B;
  --color-action-hover: #8A2464;
  --color-on-action: #FFFFFF;
  --color-focus: #EBB2D5;
  --color-border: #2E2A38;
  --color-input-border: #92879F;
  --color-field: #C0338B;
  --color-on-field: #FFFFFF;
  --color-success-bg: #244621;
  --color-success-text: #C3DFB7;
  --color-error-bg: #641B2A;
  --color-error-text: #FDE0E6;
  --color-info-bg: #123C52;
  --color-info-text: #DFF1FA;
  --color-warning-bg: #49320E;
  --color-warning-text: #FFE4A3;
}
.palusa-theme[data-theme="midnight"] {
  --color-bg: #101C36;
  --color-surface: #16264A;
  --color-soft: #223661;
  --color-text: #F3F8FA;
  --color-text-secondary: #A3B2CC;
  --color-link: #B1DFF3;
  --color-action: #B1DFF3;
  --color-action-hover: #DFF1FA;
  --color-on-action: #123C52;
  --color-focus: #B1DFF3;
  --color-border: #3B4E70;
  --color-input-border: #92879F;
  --color-field: #C0338B;
  --color-on-field: #FFFFFF;
  --color-success-bg: #244621;
  --color-success-text: #C3DFB7;
  --color-error-bg: #641B2A;
  --color-error-text: #FDE0E6;
  --color-info-bg: #123C52;
  --color-info-text: #DFF1FA;
  --color-warning-bg: #49320E;
  --color-warning-text: #FFE4A3;
}