/* ============================================================
   Molnstruktur — Color tokens
   Brand palette from the Grafisk Profil:
     mörkblå (dark blue)   #14233A   PANTONE 289 C
     kornblått (cornflower) #3163CF
     ljusgrå (light gray)  #E3E3E3   PANTONE Cool Gray 2 CP
     mörkare grå (dark gray)#C6C6C6
   Dark blue = backgrounds, gradients, opacity-over-image.
   Cornflower + grays = details, colour blocks, surfaces.
   ============================================================ */

:root {
  /* ---- Brand base (verbatim from manual) ---- */
  --brand-navy: #14233A;        /* mörkblå */
  --brand-cornflower: #3163CF;  /* kornblått */
  --brand-gray-light: #E3E3E3;  /* ljusgrå */
  --brand-gray-dark: #C6C6C6;   /* mörkare grå */
  --brand-black: #111418;
  --brand-white: #FFFFFF;

  /* ---- Navy scale (derived, harmonised around #14233A) ---- */
  --navy-950: #0C1626;
  --navy-900: #14233A;   /* brand */
  --navy-800: #1B3050;
  --navy-700: #264166;
  --navy-600: #34547F;
  --navy-500: #496A95;
  --navy-300: #8FA2BC;
  --navy-100: #D4DCE7;

  /* ---- Cornflower scale (derived around #3163CF) ---- */
  --blue-700: #234aa0;
  --blue-600: #2a56bb;
  --blue-500: #3163CF;   /* brand */
  --blue-400: #5681da;
  --blue-300: #88a4e6;
  --blue-200: #b9caf2;
  --blue-100: #e2e9fa;
  --blue-50:  #f1f5fd;

  /* ---- Neutral / gray scale (cool, anchored to brand grays) ---- */
  --gray-50:  #F7F8FA;
  --gray-100: #EFF1F4;
  --gray-200: #E3E3E3;   /* brand light gray */
  --gray-300: #C6C6C6;   /* brand dark gray */
  --gray-400: #A7AAB0;
  --gray-500: #82868E;
  --gray-600: #5D616A;
  --gray-700: #3E434C;
  --gray-800: #262B33;

  /* ---- Functional status (harmonised, professional) ---- */
  --color-success: #2E7D5B;
  --color-success-soft: #E4F1EA;
  --color-warning: #B9790C;
  --color-warning-soft: #FBF0DA;
  --color-danger: #C0392B;
  --color-danger-soft: #FAE6E3;
  --color-info: var(--blue-500);
  --color-info-soft: var(--blue-100);

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page: #FFFFFF;
  --surface-muted: var(--gray-50);
  --surface-subtle: var(--gray-100);
  --surface-card: #FFFFFF;
  --surface-inverse: var(--navy-900);
  --surface-inverse-soft: var(--navy-800);
  --surface-accent-soft: var(--blue-50);
  --surface-accent: var(--blue-500);

  /* Text */
  --text-strong: var(--navy-900);
  --text-body: #2C3A4D;
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --text-accent: var(--blue-600);
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --text-on-accent: #FFFFFF;

  /* Borders & lines */
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--navy-900);
  --border-accent: var(--blue-500);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  /* Interaction */
  --ring-focus: rgba(49, 99, 207, 0.40);
  --overlay-scrim: rgba(12, 22, 38, 0.55);

  /* Brand gradient — navy depth used over imagery / hero panels */
  --gradient-navy: linear-gradient(135deg, #1B3050 0%, #14233A 55%, #0C1626 100%);          /* @kind color */
  --gradient-navy-accent: linear-gradient(135deg, #264166 0%, #14233A 60%, #14233A 100%);   /* @kind color */
}