/* Mantelzorgacademie Design Language System
   Primitives -> semantic tokens -> component tokens -> legacy aliases.
   New UI uses --dls-* tokens. Existing screens remain compatible through
   the aliases at the bottom of this file. */

:root {
  /* Color primitives */
  --dls-slate-900:#1C3745;
  --dls-slate-800:#254657;
  --dls-slate-700:#31566B;
  --dls-slate-500:#6F8B99;
  --dls-slate-200:#D9E5EA;
  --dls-slate-100:#EEF3F5;
  --dls-taupe-800:#5B463A;
  --dls-taupe-600:#896B5A;
  --dls-taupe-200:#DCCFC5;
  --dls-taupe-100:#F1EAE5;
  --dls-neutral-900:#29485C;
  --dls-neutral-700:#536168;
  --dls-neutral-500:#748087;
  --dls-neutral-300:#DADBD7;
  --dls-neutral-200:#DDE2E2;
  --dls-neutral-100:#F2F2F0;
  --dls-neutral-050:#F7F5F2;
  --dls-white:#FFFFFF;

  /* Supporting category colors */
  --dls-plum-600:#6C5B8E;
  --dls-plum-100:#ECE7F2;
  --dls-clay-600:#B7795B;
  --dls-clay-100:#F5E7DF;
  --dls-ochre-600:#C39A54;
  --dls-ochre-100:#F7EEDC;
  --dls-rose-600:#B65D80;
  --dls-rose-100:#F7E7EE;
  --dls-danger-600:#B5521F;
  --dls-danger-100:#FDF3EE;

  /* Semantic colors */
  --dls-color-action-primary:var(--dls-slate-700);
  --dls-color-action-primary-hover:var(--dls-slate-800);
  --dls-color-action-primary-strong:var(--dls-slate-900);
  --dls-color-action-subtle:var(--dls-slate-100);
  --dls-color-action-subtle-strong:var(--dls-slate-200);
  --dls-color-accent-warm:var(--dls-taupe-600);
  --dls-color-accent-warm-strong:var(--dls-taupe-800);
  --dls-color-accent-warm-subtle:var(--dls-taupe-100);
  --dls-color-bg-page:var(--dls-white);
  --dls-color-bg-subtle:var(--dls-neutral-050);
  --dls-color-bg-muted:var(--dls-neutral-100);
  --dls-color-surface:var(--dls-white);
  --dls-color-text-heading:var(--dls-neutral-900);
  --dls-color-text-body:var(--dls-neutral-700);
  --dls-color-text-muted:var(--dls-neutral-500);
  --dls-color-text-inverse:var(--dls-white);
  --dls-color-border:var(--dls-neutral-200);
  --dls-color-border-muted:var(--dls-neutral-300);
  --dls-color-focus:var(--dls-slate-500);

  /* Typography */
  --dls-font-body:'Open Sans',system-ui,sans-serif;
  --dls-font-display:'Playfair Display',Georgia,serif;
  --dls-font-script:'Caveat',cursive;
  --dls-text-xs:.75rem;
  --dls-text-sm:.875rem;
  --dls-text-md:1rem;
  --dls-text-lg:1.125rem;
  --dls-text-xl:1.5rem;
  --dls-leading-body:1.6;
  --dls-leading-heading:1.15;

  /* Iconography: rustige lijniconen op een 24px-grid */
  --dls-icon-size-sm:16px;
  --dls-icon-size-md:20px;
  --dls-icon-size-lg:24px;
  --dls-icon-size-xl:32px;

  /* 8-point spacing scale, with compact 4/12 px steps */
  --dls-space-0:0;
  --dls-space-1:4px;
  --dls-space-2:8px;
  --dls-space-3:12px;
  --dls-space-4:16px;
  --dls-space-5:24px;
  --dls-space-6:32px;
  --dls-space-7:40px;
  --dls-space-8:48px;
  --dls-space-9:56px;
  --dls-space-10:64px;
  --dls-space-section:var(--dls-space-9);
  --dls-page-gutter:28px;
  --dls-content-max:1230px;

  /* Shape and elevation */
  --dls-radius-sm:10px;
  --dls-radius-md:14px;
  --dls-radius-lg:22px;
  --dls-radius-xl:32px;
  --dls-radius-pill:999px;
  --dls-shadow-sm:0 2px 12px rgba(38,55,62,.07);
  --dls-shadow-md:0 12px 34px rgba(38,55,62,.10);
  --dls-shadow-lg:0 24px 56px rgba(38,55,62,.14);

  /* Component contracts */
  --dls-control-height:44px;
  --dls-control-height-lg:48px;
  --dls-control-radius:var(--dls-radius-md);
  --dls-button-radius:var(--dls-radius-pill);
  --dls-card-radius:var(--dls-radius-lg);
  --dls-card-padding:var(--dls-space-5);

  /* Compatibility aliases. Remove per component as it is migrated. */
  --green:var(--dls-color-action-primary);
  --green-dk:var(--dls-color-action-primary-hover);
  --green-dker:var(--dls-color-action-primary-strong);
  --green-lt:var(--dls-color-action-subtle-strong);
  --green-soft:var(--dls-color-action-subtle);
  --warm:var(--dls-color-accent-warm);
  --warm-dk:var(--dls-color-accent-warm-strong);
  --warm-soft:var(--dls-color-accent-warm-subtle);
  --warm-line:var(--dls-taupe-200);
  --warm-gray:#5E5955;
  --warm-gray-sm:#77716C;
  --warm-gray-line:#DED8D3;
  --neutral:#5F605D;
  --neutral-dk:#3F403D;
  --neutral-sm:#777873;
  --neutral-soft:var(--dls-color-bg-muted);
  --neutral-line:var(--dls-color-border-muted);
  --plum:var(--dls-plum-600);
  --plum-dk:#594A78;
  --plum-lt:var(--dls-plum-100);
  --terra:var(--dls-clay-600);
  --terra-lt:var(--dls-clay-100);
  --ochre:var(--dls-ochre-600);
  --ochre-lt:var(--dls-ochre-100);
  --pink:var(--dls-rose-600);
  --pink-lt:var(--dls-rose-100);
  --cream:var(--dls-color-bg-subtle);
  --cream-2:#EFEAE5;
  --white:var(--dls-color-surface);
  --ink:var(--dls-color-text-heading);
  --text:var(--dls-color-text-body);
  --text-sm:var(--dls-color-text-muted);
  --line:var(--dls-color-border);
  --shadow-sm:var(--dls-shadow-sm);
  --shadow:var(--dls-shadow-md);
  --shadow-lg:var(--dls-shadow-lg);
  --space-1:var(--dls-space-2);
  --space-2:var(--dls-space-4);
  --space-3:var(--dls-space-5);
  --space-4:var(--dls-space-6);
  --space-section:var(--dls-space-section);
  --r:var(--dls-radius-md);
  --r-lg:var(--dls-radius-lg);
  --r-xl:var(--dls-radius-xl);
  --serif:var(--dls-font-display);
  --sans:var(--dls-font-body);
  --script:var(--dls-font-script);
}

@media (max-width:680px) {
  :root {
    --dls-space-section:var(--dls-space-7);
    --dls-page-gutter:18px;
  }
}

/* Reusable primitives for new templates. */
.dls-button {
  min-height:var(--dls-control-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--dls-space-2);
  padding:var(--dls-space-3) var(--dls-space-5);
  border:1px solid transparent;
  border-radius:var(--dls-button-radius);
  font:700 var(--dls-text-sm)/1 var(--dls-font-body);
  transition:background-color .15s,border-color .15s,color .15s,transform .15s;
}
.dls-button--primary { background:var(--dls-color-action-primary); color:var(--dls-color-text-inverse); }
.dls-button--primary:hover { background:var(--dls-color-action-primary-hover); }
.dls-button--secondary { background:var(--dls-color-action-subtle); border-color:var(--dls-color-action-subtle-strong); color:var(--dls-color-action-primary-strong); }
.dls-button--secondary:hover { background:var(--dls-color-action-subtle-strong); }
.dls-card { background:var(--dls-color-surface); border:1px solid var(--dls-color-border); border-radius:var(--dls-card-radius); box-shadow:var(--dls-shadow-sm); }
.dls-field { min-height:var(--dls-control-height-lg); border:1px solid var(--dls-color-border); border-radius:var(--dls-button-radius); background:var(--dls-color-bg-subtle); color:var(--dls-color-text-body); }
.dls-focus:focus-visible { outline:3px solid var(--dls-color-focus); outline-offset:3px; }
.dls-icon {
  width:1em;
  height:1em;
  display:inline-block;
  flex:0 0 auto;
  font-size:var(--dls-icon-size-md);
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}