/* Tailwind CSS v4 @theme - alla tokens för att fungera som Tailwind utilities */
@theme {
  --font-main: 'IBM-Plex-Sans', 'Arial', sans-serif;
  --font-heading: 'Raleway', 'Arial', sans-serif;

  --breakpoint-2xs: 320px;
  --breakpoint-xs: 360px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 588px;
  --breakpoint-lg: 824px;
  --breakpoint-xl: 920px;
  --breakpoint-2xl: 964px;
  --breakpoint-3xl: 1068px;
  --breakpoint-4xl: 1268px;
  --breakpoint-5xl: 1436px;

  --color-blue-100: #ebf4ff;
  --color-blue-200: #c7e4fd;
  --color-blue-300: #9acbfe;
  --color-blue-400: #71abf5;
  --color-blue-500: #3b87dd;
  --color-blue-600: #1d69c2;
  --color-blue-700: #0c4899;
  --color-blue-800: #0f3164;
  --color-blue-900: #051a3b;

  --color-blue_t-100: rgba(12, 72, 153, 0.0475);
  --color-blue_t-200: rgba(12, 72, 153, 0.12);
  --color-blue_t-300: rgba(12, 72, 153, 0.225);

  --color-red-100: #ffefef;
  --color-red-200: #fed7d5;
  --color-red-300: #feb3b0;
  --color-red-400: #fd857e;
  --color-red-500: #fd4c43;
  --color-red-600: #e31c0d;
  --color-red-700: #a41107;
  --color-red-800: #750a03;
  --color-red-900: #3e0301;

  --color-gray-100: rgba(0, 0, 0, 0.0475);
  --color-gray-200: rgba(0, 0, 0, 0.12);
  --color-gray-300: rgba(0, 0, 0, 0.225);
  --color-gray-400: rgba(0, 0, 0, 0.34);
  --color-gray-500: rgba(0, 0, 0, 0.4625);
  --color-gray-600: rgba(0, 0, 0, 0.59);
  --color-gray-700: rgba(0, 0, 0, 0.7);
  --color-gray-800: rgba(0, 0, 0, 0.795);
  --color-gray-900: rgba(0, 0, 0, 0.895);

  --color-white-100: rgba(255, 255, 255, 0.0475);
  --color-white-200: rgba(255, 255, 255, 0.12);
  --color-white-300: rgba(255, 255, 255, 0.225);
  --color-white-400: rgba(255, 255, 255, 0.34);
  --color-white-500: rgba(255, 255, 255, 0.4625);
  --color-white-600: rgba(255, 255, 255, 0.59);
  --color-white-700: rgba(255, 255, 255, 0.7);
  --color-white-800: rgba(255, 255, 255, 0.795);
  --color-white-900: rgba(255, 255, 255, 0.895);
  --color-white-solid: #fff;

  --color-yellow-100: #fff2c6;
  --color-yellow-200: #ffe385;
  --color-yellow-300: #ffd04a;
  --color-yellow-400: #ffba20;
  --color-yellow-500: #f99807;
  --color-yellow-600: #d96f02;
  --color-yellow-700: #b74e06;
  --color-yellow-800: #943b0c;
  --color-yellow-900: #7a310d;

  --color-green-100: #e6facd;
  --color-green-200: #cff5a1;
  --color-green-300: #aeeb6b;
  --color-green-400: #90dd3e;
  --color-green-500: #70c31f;
  --color-green-600: #559c14;
  --color-green-700: #417714;
  --color-green-800: #375e16;
  --color-green-900: #305017;

  --color-purple-100: #fcf5fe;
  --color-purple-200: #f8eafd;
  --color-purple-300: #f0d5f9;
  --color-purple-400: #e7b3f4;
  --color-purple-500: #d986ec;
  --color-purple-600: #c658dd;
  --color-purple-700: #ac38c1;
  --color-purple-800: #902ba0;
  --color-purple-900: #73247e;

  --text-6xl: 2rem;
  --text-5xl: 1.75rem;
  --text-4xl: 1.625rem;
  --text-3xl: 1.5rem;
  --text-2xl: 1.375rem;
  --text-xl: 1.25rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;

  --drop-shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
  --drop-shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
  --drop-shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
  --drop-shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
  --drop-shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);

  --shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
  --shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
  --shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
  --shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
  --shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);

  --radius-full: 9999px;
  --radius-3xl: 2rem;
  --radius-2xl: 1rem;
  --radius-xl: 0.75rem;
  --radius-lg: 0.5rem;
  --radius-md: 0.25rem;
  --radius-sm: 0.125rem;
  --radius-none: 0;

  --tracking-wide: 0.002em;
  --tracking-normal: 0;
  --tracking-tight: -0.005em;

  --spacing-lg: 1.5;
  --spacing-md: 1.335;
  --spacing-sm: 1.2;
}

/* CSS-variabler för tokens - kan användas direkt i CSS (bakåtkompatibilitet) */
:root,
:host {
  --font-main: 'IBM-Plex-Sans', 'Arial', sans-serif;
  --font-heading: 'Raleway', 'Arial', sans-serif;

  /* Breakpoints som CSS-variabler */
  --breakpoint-2xs: 320px;
  --breakpoint-xs: 360px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 588px;
  --breakpoint-lg: 824px;
  --breakpoint-xl: 920px;
  --breakpoint-2xl: 964px;
  --breakpoint-3xl: 1068px;
  --breakpoint-4xl: 1268px;
  --breakpoint-5xl: 1436px;

  /* Colors */
  --color-blue-100: #ebf4ff;
  --color-blue-200: #c7e4fd;
  --color-blue-300: #9acbfe;
  --color-blue-400: #71abf5;
  --color-blue-500: #3b87dd;
  --color-blue-600: #1d69c2;
  --color-blue-700: #0c4899;
  --color-blue-800: #0f3164;
  --color-blue-900: #051a3b;

  --color-blue_t-100: rgba(12, 72, 153, 0.0475);
  --color-blue_t-200: rgba(12, 72, 153, 0.12);
  --color-blue_t-300: rgba(12, 72, 153, 0.225);

  --color-red-100: #ffefef;
  --color-red-200: #fed7d5;
  --color-red-300: #feb3b0;
  --color-red-400: #fd857e;
  --color-red-500: #fd4c43;
  --color-red-600: #e31c0d;
  --color-red-700: #a41107;
  --color-red-800: #750a03;
  --color-red-900: #3e0301;

  --color-gray-100: rgba(0, 0, 0, 0.0475);
  --color-gray-200: rgba(0, 0, 0, 0.12);
  --color-gray-300: rgba(0, 0, 0, 0.225);
  --color-gray-400: rgba(0, 0, 0, 0.34);
  --color-gray-500: rgba(0, 0, 0, 0.4625);
  --color-gray-600: rgba(0, 0, 0, 0.59);
  --color-gray-700: rgba(0, 0, 0, 0.7);
  --color-gray-800: rgba(0, 0, 0, 0.795);
  --color-gray-900: rgba(0, 0, 0, 0.895);

  --color-white-100: rgba(255, 255, 255, 0.0475);
  --color-white-200: rgba(255, 255, 255, 0.12);
  --color-white-300: rgba(255, 255, 255, 0.225);
  --color-white-400: rgba(255, 255, 255, 0.34);
  --color-white-500: rgba(255, 255, 255, 0.4625);
  --color-white-600: rgba(255, 255, 255, 0.59);
  --color-white-700: rgba(255, 255, 255, 0.7);
  --color-white-800: rgba(255, 255, 255, 0.795);
  --color-white-900: rgba(255, 255, 255, 0.895);
  --color-white-solid: #fff;

  --color-yellow-100: #fff2c6;
  --color-yellow-200: #ffe385;
  --color-yellow-300: #ffd04a;
  --color-yellow-400: #ffba20;
  --color-yellow-500: #f99807;
  --color-yellow-600: #d96f02;
  --color-yellow-700: #b74e06;
  --color-yellow-800: #943b0c;
  --color-yellow-900: #7a310d;

  --color-green-100: #e6facd;
  --color-green-200: #cff5a1;
  --color-green-300: #aeeb6b;
  --color-green-400: #90dd3e;
  --color-green-500: #70c31f;
  --color-green-600: #559c14;
  --color-green-700: #417714;
  --color-green-800: #375e16;
  --color-green-900: #305017;

  --color-purple-100: #fcf5fe;
  --color-purple-200: #f8eafd;
  --color-purple-300: #f0d5f9;
  --color-purple-400: #e7b3f4;
  --color-purple-500: #d986ec;
  --color-purple-600: #c658dd;
  --color-purple-700: #ac38c1;
  --color-purple-800: #902ba0;
  --color-purple-900: #73247e;

  /* Typography */
  --text-6xl: 2rem;
  --text-5xl: 1.75rem;
  --text-4xl: 1.625rem;
  --text-3xl: 1.5rem;
  --text-2xl: 1.375rem;
  --text-xl: 1.25rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;

  /* Shadows */
  --drop-shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
  --drop-shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
  --drop-shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
  --drop-shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
  --drop-shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);

  --shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
  --shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
  --shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
  --shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
  --shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);

  /* Border radius */
  --radius-full: 9999px;
  --radius-3xl: 2rem;
  --radius-2xl: 1rem;
  --radius-xl: 0.75rem;
  --radius-lg: 0.5rem;
  --radius-md: 0.25rem;
  --radius-sm: 0.125rem;
  --radius-none: 0;

  /* Letter spacing */
  --tracking-wide: 0.002em;
  --tracking-normal: 0;
  --tracking-tight: -0.005em;

  /* Spacing */
  --spacing-lg: 1.5;
  --spacing-md: 1.335;
  --spacing-sm: 1.2;
}

/* Styling links in default slot of FdsBlockAlert */
.alert-content .link {
  @apply text-gray-900;
}