/* ============================================================
   Akademikerförbundet SSR — Color tokens
   Grundton: dark turquoise-blue (work in shades + opacity).
   Complement: warm pink, used sparingly. Accent: orange.
   All foreground/background pairs target WCAG AA.
   ============================================================ */

:root {
  /* --- Base palette (raw values, from SSR Colours.fig) --- */
  --c-blue-950: #093745;   /* rgb(9,55,69)   — darkest, ink */
  --c-blue-900: #074457;   /* rgb(7,68,87)   — "dark blue 1", primary */
  --c-blue-600: #006e90;   /* rgb(0,110,144) — bright teal */
  --c-blue-200: #c0dbe4;   /* rgb(192,219,228) — light blue */
  --c-blue-100: #DEF0F7;   /* rgb(222,240,247) — palest blue */

  --c-pink-300: #f8c5b0;   /* rgb(248,197,176) — warm peach */
  --c-pink-100: #fde5dd;   /* rgb(253,229,221) — palest pink */

  --c-orange-600: #e75113; /* rgb(231,81,19)  — rödorange */
  --c-orange-700: #d74206; /* rgb(215,66,6)   — dark orange (accent text) */

  --c-white: #ffffff;
  --c-black: #07242c;      /* near-black, tinted toward the blue */

  /* --- Tonal scale of the base blue (shades + opacity for depth) --- */
  --blue-tint-04: color-mix(in srgb, var(--c-blue-900) 4%, white);
  --blue-tint-08: color-mix(in srgb, var(--c-blue-900) 8%, white);
  --blue-tint-12: color-mix(in srgb, var(--c-blue-900) 12%, white);
  --blue-tint-24: color-mix(in srgb, var(--c-blue-900) 24%, white);
  --blue-tint-40: color-mix(in srgb, var(--c-blue-900) 40%, white);

  /* --- Neutrals (cool, tinted toward the base) --- */
  --c-neutral-50:  #f6f8f9;
  --c-neutral-100: #eef2f4;
  --c-neutral-200: #dde5e8;
  --c-neutral-300: #c4d0d5;
  --c-neutral-400: #95a6ad;
  --c-neutral-500: #6a7c83;
  --c-neutral-600: #4a5b61;
  --c-neutral-700: #324249;
  --c-neutral-800: #1d2e34;

  /* --- Semantic feedback (kept tight, on-brand) --- */
  --c-success: #1f7a5b;
  --c-warning: #b5650a;
  --c-error:   #c02a1b;
  --c-info:    var(--c-blue-600);

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

  /* Surfaces */
  --surface-page:        var(--c-white);
  --surface-subtle:      var(--c-neutral-50);
  --surface-muted:       var(--c-blue-100);
  --surface-card:        var(--c-white);
  --surface-inverse:     var(--c-blue-900);
  --surface-inverse-deep:var(--c-blue-950);
  --surface-accent-soft: var(--c-pink-100);

  /* Text */
  --text-strong:    var(--c-blue-950);
  --text-body:      var(--c-neutral-800);
  --text-muted:     var(--c-neutral-600);
  --text-subtle:    var(--c-neutral-500);
  --text-on-dark:   var(--c-white);
  --text-on-dark-muted: var(--c-blue-200);
  --text-link:      var(--c-blue-600);
  --text-accent:    var(--c-orange-700);

  /* Brand / interactive */
  --brand-primary:        var(--c-blue-900);
  --brand-primary-hover:  var(--c-blue-950);
  --brand-primary-active: #052f3d;
  --brand-accent:         var(--c-orange-600);
  --brand-accent-hover:   var(--c-orange-700);

  /* Borders & lines */
  --border-subtle:  var(--c-neutral-200);
  --border-default: var(--c-neutral-300);
  --border-strong:  var(--c-blue-900);
  --border-focus:   var(--c-blue-600);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-blue-600) 45%, transparent);
}