/* tokens.css – färger, typsnitt, storlekar, avstånd och radier som variabler. */

:root {
  /* Färger – bygger på Region Värmlands palett (se rv-palette.css). Namnet i kommentaren är källan. */
  --color-page-bg: #f5f5f5; /* rv-background-light: sidans bakgrund */
  --color-bg: #fff; /* vita ytor: header, paneler, fält, kort */
  --color-surface: #f5f5f5; /* rv-background-light */
  --color-surface-dark: #333333; /* rv-text-black (Svart-textfärg) */
  --color-surface-dark-hover: #404040;
  --color-text: #212529; /* rv-text */
  --color-text-muted: #6f6e68; /* rv-gray (Grå), klarar AA mot vitt */
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #d6d6d6;
  --color-border: #9a9a9a;
  --color-border-light: #d6d6d6; /* knappram */
  --color-field-border: #d8d8d8; /* rv-background-dark – avdelarlinjer och dekorativa kanter */
  --color-control-border: #8c8b86; /* rv-gray-80 (Grå-80) – kant på fält, val och knappar, 3,4:1 mot vitt (WCAG 1.4.11) */
  --color-placeholder: #6f6e68; /* rv-gray (Grå) */
  --color-accent: #f9b000; /* rv-accent-3: badges, sifferbollar */
  --color-nav-indicator: #99bfe3; /* rv-accent-4-40 (Blå-40): streck under aktiv flik */
  --color-header-action: #005eb8; /* rv-accent-4: headerikoner och deras text */
  --color-link: #005eb8; /* rv-accent-4 */
  --color-notice-bg: #feefcc; /* rv-accent-3-20: testbanner */
  --color-selected-bg: #e5eef7; /* rv-accent-4-10: valt svarsalternativ */
  --color-error: #aa112c; /* rv-accent-5 */
  --color-yes: #008264; /* rv-accent-2 (Grön): valt Ja */
  --color-yes-bg: #e5f2ef; /* rv-accent-2-10 */
  --color-no: #aa112c; /* rv-accent-5 (Röd): valt Nej */
  --color-no-bg: #f6e7e9; /* rv-accent-5-10 */
  --color-success-bg: #99cdc1;
  --color-success-border: #66b4a2; /* rv-accent-2-60 (Grön-60) */
  --color-success-icon: #004434; /* mörkgrön från regionens alert-accent-2, 6:1 mot bakgrunden */

  /* Typografi */
  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-size-xxs: 1rem; /* 10px */
  --font-size-xs: 1.2rem; /* 12px */
  --font-size-sm: 1.4rem; /* 14px */
  --font-size-base: 1.6rem; /* 16px */
  --font-size-md: 1.8rem; /* 18px */
  --font-size-lg: 2.2rem; /* 22px */
  --font-size-xl: 3.2rem; /* 32px */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Avstånd */
  --space-1: 0.4rem; /* 4px */
  --space-2: 0.8rem; /* 8px */
  --space-3: 1.2rem; /* 12px */
  --space-4: 1.6rem; /* 16px */
  --space-5: 2.4rem; /* 24px */
  --space-6: 3.2rem; /* 32px */
  --space-7: 4.8rem; /* 48px */
  --space-8: 6.4rem; /* 64px */
  --space-9: 9.6rem; /* 96px */

  /* Radier */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1170px;
  --container-gutter: var(--space-4);
  --header-height: 96px;
  --nav-height: 54px;
  --nav-indicator-height: 6px;
}