/* ==========================================================================
   Novuqi – Design Tokens
   Källa: bifogat designsystem (färger, typografi, komponentspecar).
   Ändra INTE dessa värden utan att stämma av mot designsystemet – de är
   kontraktet mellan design och kod för hela produkten.
   ========================================================================== */

:root {
  /* ---- Färger: kärnpalett ---- */
  --color-forest: #1F3D2E;      /* Skogsgrön – primär */
  --color-forest-dark: #162C21; /* Mörkare nyans för hover/tryckt på primärknapp */
  --color-sage: #A8BBA7;        /* Salvia – sekundär */
  --color-sage-dark: #93A992;   /* Hover/tryckt på sekundärknapp */
  --color-warm-white: #F7F5F2;  /* Varm vit – bas-bakgrund */
  --color-sand: #E8E3DB;        /* Sand – ytor, kort, dividers */
  --color-coal: #1A1A1A;        /* Kol – primär text */
  /* Dimgrå – sekundär text. Designsystemets #6F7672 gav 4.28:1 mot varm vit
     (under WCAG AA:s krav på 4.5:1 för brödtext), vilket väger extra tungt
     eftersom målgruppen uttryckligen inkluderar äldre användare. Mörkad
     något inom samma gråton så den håller AA mot alla bakgrunder den
     faktiskt används på (varm vit, vit, sand) – samma karaktär, bara
     läsbar. */
  --color-gray: #5B625E;
  --color-sky: #D9E7F2;         /* Himmelsblå – accent, fokus, info */

  /* ---- Färger: semantiska (härledda, ej i original­palett men krävs
     för fel/varning/success-tillstånd – valda för att harmoniera med
     den jordnära paletten ovan) ---- */
  --color-error: #B3433E;
  --color-error-bg: #F7E8E7;
  --color-warning: #B8823C;
  --color-warning-bg: #F5EBDA;
  --color-success: #3F6B4E;
  --color-success-bg: #E9F0EA;

  /* ---- Ytor & text (semantiska alias) ---- */
  --surface-page: var(--color-warm-white);
  --surface-card: #FFFFFF;
  --surface-card-muted: var(--color-sand);
  --surface-inverse: var(--color-forest);
  --text-primary: var(--color-coal);
  --text-secondary: var(--color-gray);
  --text-inverse: #FFFFFF;
  --text-inverse-muted: rgba(255, 255, 255, 0.72);
  --border-default: #DDD7CC;
  --border-strong: #C7C0B3;
  --focus-ring: var(--color-sky);

  /* ---- Typografi ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-size-h1: 2.25rem;     /* 36px */
  --line-height-h1: 2.75rem;   /* 44px */
  --font-size-h2: 1.75rem;     /* 28px */
  --line-height-h2: 2.25rem;   /* 36px */
  --font-size-h3: 1.25rem;     /* 20px */
  --line-height-h3: 1.75rem;   /* 28px */
  --font-size-body-lg: 1rem;       /* 16px */
  --line-height-body-lg: 1.5rem;   /* 24px */
  --font-size-body: 0.875rem;      /* 14px */
  --line-height-body: 1.25rem;     /* 20px */
  --font-size-small: 0.75rem;      /* 12px */
  --line-height-small: 1rem;       /* 16px */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- Spacing (8px-skala) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Radie ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Skuggor (Låg / Medium / Hög / Lyft) ---- */
  --shadow-low: 0 1px 2px rgba(26, 26, 26, 0.06), 0 1px 1px rgba(26, 26, 26, 0.04);
  --shadow-medium: 0 4px 10px rgba(26, 26, 26, 0.08), 0 2px 4px rgba(26, 26, 26, 0.05);
  --shadow-high: 0 10px 24px rgba(26, 26, 26, 0.12), 0 4px 8px rgba(26, 26, 26, 0.06);
  --shadow-lift: 0 20px 40px rgba(26, 26, 26, 0.16), 0 8px 16px rgba(26, 26, 26, 0.08);

  /* ---- Övrigt ---- */
  --content-max-width: 1200px;
  --content-narrow: 760px;
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --header-height: 72px;
}