/* ══════════════════════════════════════════════════
 * PlateDesk Design Tokens - single source of truth
 * Link in HTML: <link rel="stylesheet" href="/css/tokens.css">
 * ══════════════════════════════════════════════════ */

:root {
  /* ── Kleuren - primair (goud) ── */
  --pd-gold-50:  #FBF4E4;
  --pd-gold-100: #F0E0B8;
  --pd-gold-300: #E8C97A;
  --pd-gold-500: #D4A853;
  --pd-gold-700: #B8903F;
  --pd-gold-900: #8B6B2E;

  /* ── Kleuren - neutraal (donker) ── */
  --pd-ink-900:  #111111;
  --pd-ink-800:  #1A1A1A;
  --pd-ink-700:  #222222;
  --pd-ink-600:  #2D2A26;
  --pd-ink-500:  #4A4540;
  --pd-ink-400:  #6B6560;
  --pd-ink-300:  #8A8578;
  --pd-ink-200:  #C7C0B0;
  --pd-ink-100:  #F0E8D8;
  --pd-ink-50:   #FAF5EB;
  --pd-white:    #FFFFFF;

  /* ── Status ── */
  --pd-success: #22C55E;
  --pd-warning: #F59E0B;
  --pd-danger:  #EF4444;
  --pd-info:    #3B82F6;

  /* ── Semantische aliases (gebruik deze in nieuwe code) ── */
  --color-bg:           var(--pd-ink-50);
  --color-surface:      var(--pd-white);
  --color-surface-alt:  var(--pd-ink-100);
  --color-border:       var(--pd-ink-100);
  --color-text:         var(--pd-ink-600);
  --color-text-muted:   var(--pd-ink-300);
  --color-text-strong:  var(--pd-ink-900);
  --color-primary:      var(--pd-gold-500);
  --color-primary-hover:var(--pd-gold-700);
  --color-primary-text: var(--pd-ink-900);
  --color-accent:       var(--pd-gold-300);

  --color-dark-bg:      var(--pd-ink-900);
  --color-dark-surface: var(--pd-ink-800);
  --color-dark-text:    var(--pd-ink-50);

  /* ── Backwards-compat aliases (oud naam → nieuw token) ── */
  --pd-primary:      var(--pd-gold-500);
  --pd-primary-dark: var(--pd-gold-700);
  --pd-accent:       var(--pd-gold-300);
  --pd-accent-light: var(--pd-gold-100);
  --pd-dark:         var(--pd-ink-900);
  --pd-dark-light:   var(--pd-ink-800);
  --pd-bg:           var(--pd-ink-50);
  --pd-border:       var(--pd-ink-100);
  --pd-text:         var(--pd-ink-600);
  --pd-text-muted:   var(--pd-ink-300);

  --gold:       var(--pd-gold-500);
  --gold-dark:  var(--pd-gold-700);
  --gold-light: var(--pd-gold-300);
  --charcoal:       var(--pd-ink-900);
  --charcoal-mid:   var(--pd-ink-800);
  --charcoal-light: var(--pd-ink-700);
  --cream:      var(--pd-ink-50);
  --cream-dark: var(--pd-ink-100);

  /* ── Spacing schaal ── */
  --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;

  /* ── Radius ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadow ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.08);

  /* ── Typografie ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ── */
  --sidebar-width:    240px;
  --topbar-height:    64px;
  --container-max:    1200px;
  --content-max:      1100px;
}

/* ── Body defaults ── */
.pd-reset {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

/* ── Focus ring (accessibility) ── */
.pd-focusable:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pd-gold-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Dark mode override - activeer door html.dark ── */
html.dark {
  --color-bg: var(--pd-ink-900);
  --color-surface: var(--pd-ink-800);
  --color-surface-alt: var(--pd-ink-700);
  --color-border: #333;
  --color-text: #e5e5e5;
  --color-text-muted: #888;
  --color-text-strong: #fff;

  --pd-bg: var(--pd-ink-900);
  --pd-border: #2a2a2a;
  --pd-text: #e5e5e5;
  --pd-text-muted: #888;
}

html.dark body {
  background: var(--pd-ink-900);
  color: #e5e5e5;
}

/* Skip-to-content link voor screen readers */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.75rem 1rem;
  background: var(--pd-ink-900);
  color: var(--pd-gold-500);
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--radius-md);
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}