/* ============================================================
   base.css — Gedeelde design tokens, reset en UI primitieven
   Wordt geladen vóór home.css en shop.css op elke pagina.
   ============================================================ */

/* ---- Design tokens -------------------------------------------------------- */

:root {
  /* Thema-kern */
  --color-page-bg:       #f8f6f3;
  --color-surface:       #ffffff;
  --color-surface-soft:  #f2ede8;
  --color-text:          #1a1a1a;
  --color-text-soft:     #4f4f4f;
  --color-text-muted:    color-mix(in srgb, var(--color-text-soft) 78%, var(--color-page-bg) 22%);
  --color-border:        #e2dbd4;
  --color-border-strong: color-mix(in srgb, var(--color-border) 68%, var(--color-dark-surface) 32%);
  --color-primary:       #b5621a;
  --color-primary-hover: #8f4a12;
  --color-dark-surface:  #2e2e2e;
  --color-on-dark:       #ffffff;
  --color-on-dark-muted: color-mix(in srgb, var(--color-on-dark) 68%, var(--color-dark-surface) 32%);
  --color-on-primary:    #ffffff;

  /* Legacy aliases voor bestaande CSS */
  --page:          var(--color-page-bg);
  --surface:       var(--color-surface);
  --surface-soft:  var(--color-surface-soft);
  --line:          var(--color-border);
  --line-strong:   var(--color-border-strong);
  --ink-900:       var(--color-text);
  --ink-700:       var(--color-text-soft);
  --ink-500:       var(--color-text-muted);
  --ink-400:       color-mix(in srgb, var(--color-text-muted) 86%, var(--color-page-bg) 14%);
  --brand-dark:        var(--color-dark-surface);
  --brand-accent:      var(--color-primary);
  --brand-accent-dark: var(--color-primary-hover);

  /* Statuskleuren */
  --clr-success:   #1d7a34;
  --bg-success:    #edfaef;
  --clr-error:     #c0392b;
  --bg-error:      #fdf2f2;
  --clr-warning:   #7a5400;
  --bg-warning:    #fef8ee;

  /* Typografie */
  --font:          'Barlow', system-ui, -apple-system, sans-serif;

  /* Geometrie */
  --radius-lg:     14px;
  --radius-md:     10px;
  --radius-sm:     8px;
  --radius:        8px;        /* alias voor shop.css compat */

  /* Schaduw */
  --shadow:        0 2px 8px rgba(0, 0, 0, .07);
  --shadow-soft:   0 12px 28px rgba(17, 17, 17, .06);

  /* Breedte */
  --container:     1240px;

  /* Legacy alias die home.css nog gebruikt */
  --font-sans:     'Barlow', system-ui, -apple-system, sans-serif;

  /* Copper tint-schaal (gebruikt in home.css) */
  --copper-900:    var(--color-text);
  --copper-700:    var(--color-dark-surface);
  --copper-600:    var(--color-text-soft);
  --copper-500:    var(--brand-accent); /* koper — voor accenten & bullets */
  --copper-100:    color-mix(in srgb, var(--surface-soft) 72%, var(--page) 28%);
}

/* ---- Reset ----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; height: auto; }

/* ---- Layout --------------------------------------------------------------- */

/* Beide namen werken: .inner (home) en .container (shop/admin) */
.inner,
.container {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

/* ---- Knoppen -------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-secondary { background: var(--color-dark-surface); color: var(--color-on-dark); border-color: var(--color-dark-surface); }
.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-dark-surface) 86%, black 14%);
  border-color: color-mix(in srgb, var(--color-dark-surface) 86%, black 14%);
  color: var(--color-on-dark);
}
.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.btn-danger { background: var(--clr-error); color: #fff; border-color: var(--clr-error); }
.btn-danger:hover { background: #a93226; border-color: #a93226; color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-large { padding: 13px 28px; font-size: 16px; }
.btn-block { width: 100%; display: block; }

/* ---- Landing knoppen (home + productpagina) ------------------------------ */

.landing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.landing-button--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.landing-button--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.landing-button--dark {
  background: var(--color-dark-surface);
  color: var(--color-on-dark);
  border-color: var(--color-dark-surface);
}

.landing-button--dark:hover {
  background: color-mix(in srgb, var(--color-dark-surface) 86%, black 14%);
  border-color: color-mix(in srgb, var(--color-dark-surface) 86%, black 14%);
  color: var(--color-on-dark);
}

.landing-button--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.landing-button--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

/* Ghost op donkere achtergrond (hero) */
.landing-button--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.landing-button--ghost-light:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ---- Formulieren ---------------------------------------------------------- */

.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 14px; }
.form-field label abbr { color: var(--clr-error); text-decoration: none; border: none; }
.form-field small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-500); }
.form-row.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=search], input[type=url], textarea, select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
textarea { resize: vertical; }

/* ---- Meldingen ------------------------------------------------------------ */

.notice {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  border: 1px solid;
  font-size: 14px;
  line-height: 1.5;
}
.notice-success { background: var(--bg-success); border-color: #cfe4d2; color: var(--clr-success); }
.notice-error   { background: var(--bg-error);   border-color: #efc6c6; color: var(--clr-error); }
.notice-warning { background: var(--bg-warning); border-color: #e9d39f; color: var(--clr-warning); }