/* =========================================================
   Design Tokens — Mixed Living Knowledge Platform
   ========================================================= */

:root {
  /* -------------------------------------------------------
     Brand colours (supplied colour codes, Gemengd Wonen)
     ------------------------------------------------------- */
  --brand-teal:     #00576b;
  --brand-salmon:   #d49478;
  --brand-burgundy: #9b1e42;
  --brand-blue:     #7ccdd8;
  --brand-yellow:   #e9b719;

  /* Tints for backgrounds; darker variants where white text must stay readable (AA) */
  --brand-salmon-100:   #f7e9e2;
  --brand-blue-100:     #e2f4f6;
  --brand-yellow-100:   #fcf3d6;
  --brand-burgundy-100: #f6e3e9;
  --brand-salmon-700:   #a65f43;
  --brand-blue-700:     #1f7f8c;
  --brand-yellow-700:   #8a6a00;
  --brand-burgundy-700: #7d1834;

  /* -------------------------------------------------------
     Colour palette
     ------------------------------------------------------- */

  /* Primary — brand teal */
  --color-primary-50:  #eef7f9;
  --color-primary-100: #d3ebf0;
  --color-primary-200: #a8d6e0;
  --color-primary-300: #6fb8c8;
  --color-primary-400: #2f8fa5;
  --color-primary-500: #0b6e86;
  --color-primary-600: #00576b;   /* main */
  --color-primary-700: #004656;
  --color-primary-800: #003642;
  --color-primary-900: #002630;

  /* Neutral (slightly teal-tinted greys) */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f7fafa;
  --color-neutral-100: #eef3f4;
  --color-neutral-200: #dde6e8;
  --color-neutral-300: #c3d0d3;
  --color-neutral-400: #8fa2a7;
  --color-neutral-500: #5f7277;
  --color-neutral-600: #4a5b60;
  --color-neutral-700: #34444a;
  --color-neutral-800: #1f2d32;
  --color-neutral-900: #12201f;

  /* Accent — brand burgundy for actions and links */
  --color-accent-400: #b8456a;
  --color-accent-500: #9b1e42;
  --color-accent-600: #7d1834;

  /* Semantic aliases */
  --color-bg:           #f1f9fa;
  --color-surface:      var(--color-neutral-0);
  --color-surface-2:    var(--brand-blue-100);
  --color-border:       var(--color-neutral-200);
  --color-border-strong:var(--color-neutral-300);
  --color-text:         var(--color-neutral-900);
  --color-text-muted:   var(--color-neutral-600);
  --color-text-light:   var(--color-neutral-500);
  --color-heading:      var(--brand-teal);
  --color-link:         var(--brand-burgundy);
  --color-link-hover:   var(--brand-burgundy-700);
  --color-focus:        var(--color-primary-500);
  --color-focus-on-dark: var(--brand-yellow);

  /* Role accent colours (brand palette; white text passes AA) */
  --role-care-provider:         var(--brand-burgundy);
  --role-housing-provider:      var(--brand-teal);
  --role-local-authority:       var(--brand-yellow-700);
  --role-residents:             var(--brand-salmon-700);
  --role-community-professional:var(--brand-blue-700);

  /* Phase colours (the five brand colours, darkened where needed for AA) */
  --phase-1: var(--brand-teal);
  --phase-2: var(--brand-burgundy);
  --phase-3: var(--brand-salmon-700);
  --phase-4: var(--brand-blue-700);
  --phase-5: var(--brand-yellow-700);

  /* -------------------------------------------------------
     Typography
     ------------------------------------------------------- */
  --font-sans:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inconsolata", Consolas, "Cascadia Mono", ui-monospace, monospace;
  --font-mono:    var(--font-display);

  /* Fluid sizes scale with the viewport but never drop below a readable minimum */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --text-xl:    clamp(1.125rem,  1.05rem + 0.4vw, 1.25rem);
  --text-2xl:   clamp(1.25rem,   1.1rem + 0.7vw,  1.5rem);
  --text-3xl:   clamp(1.5rem,    1.25rem + 1.1vw, 1.875rem);
  --text-4xl:   clamp(1.875rem,  1.45rem + 1.8vw, 2.5rem);
  --text-5xl:   clamp(2.25rem,   1.6rem + 2.8vw,  3.5rem);

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.15;
  --line-height-snug:     1.35;
  --line-height-normal:   1.55;
  --line-height-relaxed:  1.65;

  /* -------------------------------------------------------
     Spacing
     ------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* -------------------------------------------------------
     Layout
     ------------------------------------------------------- */
  --max-width:      1280px;
  --content-width:  760px;
  --nav-height:     72px;
  --gutter:         clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --section-space:  clamp(3rem, 2rem + 4vw, 5.5rem);

  /* -------------------------------------------------------
     Borders & Radius
     ------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  --border-width: 1px;

  /* -------------------------------------------------------
     Shadows (soft, layered; tinted with the neutral ink)
     ------------------------------------------------------- */
  --shadow-ink: 18 32 31;
  --shadow-xs:  0 1px 2px rgb(var(--shadow-ink) / 0.06);
  --shadow-sm:  0 1px 2px rgb(var(--shadow-ink) / 0.06), 0 2px 6px rgb(var(--shadow-ink) / 0.05);
  --shadow-md:  0 2px 4px rgb(var(--shadow-ink) / 0.05), 0 8px 20px -4px rgb(var(--shadow-ink) / 0.10);
  --shadow-lg:  0 4px 8px rgb(var(--shadow-ink) / 0.05), 0 18px 40px -8px rgb(var(--shadow-ink) / 0.16);
  --shadow-xl:  0 8px 16px rgb(var(--shadow-ink) / 0.06), 0 28px 60px -12px rgb(var(--shadow-ink) / 0.22);
  --ring:       0 0 0 3px var(--color-primary-100);

  /* -------------------------------------------------------
     Transitions
     ------------------------------------------------------- */
  --ease-out:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-fast:   160ms var(--ease-out);
  --transition-normal: 240ms var(--ease-out);
  --transition-slow:   400ms var(--ease-out);

  /* -------------------------------------------------------
     Z-index layers
     ------------------------------------------------------- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-top:      500;
}

/* Reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0ms;
    --transition-normal: 0ms;
    --transition-slow:   0ms;
  }
}