/**
 * SKSB Design-Tokens
 * Zentrales Stylesheet für alle SK-Plugins
 *
 * Wird als MU-Plugin oder zentrale CSS-Datei eingebunden.
 * Alle Plugins referenzieren diese Variablen statt eigener Werte.
 *
 * Light + Dark Mode. Theme-Wechsel: nur diese Datei anpassen.
 */

/* ══════════════════════════════════════════════════
   LIGHT MODE (Default)
   ══════════════════════════════════════════════════ */

:root {

  /* ── Primärfarbe (Dunkelgrün) ─────────────────── */
  --sk-green-50:   #f0f7ee;
  --sk-green-100:  #dcefd4;
  --sk-green-200:  #c8e6b8;
  --sk-green-300:  #a8d99a;
  --sk-green-400:  #4a9a30;
  --sk-green-500:  #2d6a1f;  /* Primärfarbe */
  --sk-green-600:  #1e4d15;
  --sk-green-700:  #153b0f;
  --sk-green-800:  #0e2a0a;
  --sk-green-900:  #081c06;

  /* Semantische Primär-Zuordnungen */
  --sk-primary:          var(--sk-green-500);
  --sk-primary-hover:    var(--sk-green-600);
  --sk-primary-light:    var(--sk-green-100);
  --sk-primary-lighter:  var(--sk-green-50);
  --sk-primary-dark:     var(--sk-green-700);

  /* ── Graustufen ───────────────────────────────── */
  --sk-gray-50:   #f8f9fa;
  --sk-gray-100:  #f0f0f1;
  --sk-gray-200:  #dcdcde;
  --sk-gray-300:  #c3c4c7;
  --sk-gray-400:  #8c8f94;
  --sk-gray-500:  #646970;
  --sk-gray-600:  #50575e;
  --sk-gray-700:  #3c434a;
  --sk-gray-800:  #2c3338;
  --sk-gray-900:  #1d2327;

  /* ── Status-Farben ────────────────────────────── */
  --sk-success:      #2d6a1f;
  --sk-success-bg:   #edf7e9;
  --sk-success-border: #c8e6b8;

  --sk-warning:      #92400e;
  --sk-warning-bg:   #fef3c7;
  --sk-warning-border: #f59e0b;

  --sk-error:        #991b1b;
  --sk-error-bg:     #fee2e2;
  --sk-error-border: #f87171;

  --sk-info:         #1e40af;
  --sk-info-bg:      #dbeafe;
  --sk-info-border:  #60a5fa;

  /* ── Semantische Oberflächen ──────────────────── */
  --sk-bg:           #ffffff;
  --sk-bg-subtle:    var(--sk-gray-50);
  --sk-bg-muted:     var(--sk-gray-100);
  --sk-text:         var(--sk-gray-900);
  --sk-text-muted:   var(--sk-gray-500);
  --sk-text-subtle:  var(--sk-gray-400);
  --sk-border:       var(--sk-gray-200);
  --sk-border-strong: var(--sk-gray-300);

  /* Sidebar-Block (aus bestehenden Reusable Blocks) */
  --sk-sidebar-bg:     #f8fdf6;
  --sk-sidebar-border: #e0f0d8;

  /* ── Typografie ───────────────────────────────── */
  --sk-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --sk-font-mono:    'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* Skala: Perfect Fourth (1.333) ab 16px Basis */
  --sk-text-xs:      0.75rem;    /* 12px - Caption, Badges */
  --sk-text-sm:      0.875rem;   /* 14px - Small, Labels */
  --sk-text-base:    1rem;       /* 16px - Body */
  --sk-text-lg:      1.125rem;   /* 18px - Lead */
  --sk-text-xl:      1.333rem;   /* ~21px - h4 */
  --sk-text-2xl:     1.777rem;   /* ~28px - h3 */
  --sk-text-3xl:     2.369rem;   /* ~38px - h2 */
  --sk-text-4xl:     3.157rem;   /* ~50px - h1 */

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

  --sk-leading-tight:   1.2;     /* Überschriften */
  --sk-leading-normal:  1.5;     /* Fließtext */
  --sk-leading-relaxed: 1.75;    /* Langer Text, ältere Zielgruppe */

  --sk-tracking-tight:  -0.02em; /* Große Überschriften */
  --sk-tracking-normal:  0;      /* Body */
  --sk-tracking-wide:    0.05em; /* Uppercase Labels */

  /* ── Abstände (8px-Grid) ──────────────────────── */
  --sk-space-0:    0;
  --sk-space-1:    0.25rem;   /* 4px */
  --sk-space-2:    0.5rem;    /* 8px */
  --sk-space-3:    0.75rem;   /* 12px */
  --sk-space-4:    1rem;      /* 16px */
  --sk-space-5:    1.25rem;   /* 20px */
  --sk-space-6:    1.5rem;    /* 24px */
  --sk-space-8:    2rem;      /* 32px */
  --sk-space-10:   2.5rem;    /* 40px */
  --sk-space-12:   3rem;      /* 48px */
  --sk-space-16:   4rem;      /* 64px */

  /* ── Border-Radius ────────────────────────────── */
  --sk-radius-sm:    4px;     /* Inputs, kleine Elemente */
  --sk-radius:       8px;     /* Buttons, Cards — DER STANDARD */
  --sk-radius-lg:    12px;    /* Große Cards, Modals */
  --sk-radius-xl:    16px;    /* Hero-Bereiche */
  --sk-radius-full:  9999px;  /* Pills, Badges, Avatare */

  /* ── Schatten ─────────────────────────────────── */
  --sk-shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --sk-shadow:       0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --sk-shadow-md:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --sk-shadow-lg:    0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

  /* ── Transitions ──────────────────────────────── */
  --sk-transition:   150ms ease;
  --sk-transition-slow: 300ms ease;

  /* ── Header/Footer (aus Kadence) ──────────────── */
  --sk-header-bg:    var(--sk-green-500);
  --sk-header-text:  #ffffff;
  --sk-footer-bg:    #1a4012;
  --sk-footer-text:  #a8c8a0;
}

/* ══════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════ */

body.sk-dark {
  --sk-primary:         #4a9a30;
  --sk-primary-hover:   #5cb840;
  --sk-primary-light:   #1a3312;
  --sk-primary-lighter: #0f1f0a;
  --sk-primary-dark:    #6fcc5a;

  --sk-bg:              #121212;
  --sk-bg-subtle:       #1a1e2a;
  --sk-bg-muted:        #252a36;
  --sk-text:            #e0e0e0;
  --sk-text-muted:      #9ca3af;
  --sk-text-subtle:     #6b7280;
  --sk-border:          #374151;
  --sk-border-strong:   #4b5563;

  --sk-sidebar-bg:      #1a2618;
  --sk-sidebar-border:  #2a3d24;

  --sk-success:         #4ade80;
  --sk-success-bg:      #052e16;
  --sk-success-border:  #166534;

  --sk-warning:         #fbbf24;
  --sk-warning-bg:      #451a03;
  --sk-warning-border:  #92400e;

  --sk-error:           #f87171;
  --sk-error-bg:        #450a0a;
  --sk-error-border:    #991b1b;

  --sk-info:            #60a5fa;
  --sk-info-bg:         #172554;
  --sk-info-border:     #1e40af;

  --sk-header-bg:       #1a3312;
  --sk-header-text:     #d4edbe;
  --sk-footer-bg:       #0a1a06;
  --sk-footer-text:     #6b8f5e;

  --sk-shadow-sm:       0 1px 2px rgba(0,0,0,0.3);
  --sk-shadow:          0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --sk-shadow-md:       0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --sk-shadow-lg:       0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
}

/* ══════════════════════════════════════════════════
   KOMPONENTEN — Einheitliche Styles
   ══════════════════════════════════════════════════ */

/* ── Buttons ────────────────────────────────────── */

.sk-btn,
.button,
button[type="submit"],
input[type="submit"] {
  font-family:    var(--sk-font);
  font-size:      var(--sk-text-sm);
  font-weight:    var(--sk-weight-medium);
  line-height:    1.4;
  padding:        var(--sk-space-2) var(--sk-space-4);
  border-radius:  var(--sk-radius);
  border:         1px solid transparent;
  cursor:         pointer;
  transition:     background var(--sk-transition), color var(--sk-transition),
                  border-color var(--sk-transition), transform var(--sk-transition);
  display:        inline-flex;
  align-items:    center;
  gap:            var(--sk-space-1);
  white-space:    nowrap;
  text-decoration: none;
}

/* Primär (ausgefüllt, grün) */
.sk-btn-primary,
.button.button-primary,
.skr-btn-review {
  background:   var(--sk-primary);
  color:        #fff;
  border-color: var(--sk-primary);
}
.sk-btn-primary:hover,
.button.button-primary:hover,
.skr-btn-review:hover {
  background:   var(--sk-primary-hover);
  border-color: var(--sk-primary-hover);
  transform:    translateY(-1px);
}

/* Sekundär (Outline) */
.sk-btn-secondary,
.button.button-secondary,
.skr-btn-publish,
.skr-btn-future {
  background:   var(--sk-bg);
  color:        var(--sk-primary);
  border-color: var(--sk-primary);
}
.sk-btn-secondary:hover,
.button.button-secondary:hover,
.skr-btn-publish:hover,
.skr-btn-future:hover {
  background:   var(--sk-primary-lighter);
}

/* Neutral (grau) */
.sk-btn-neutral,
.skr-btn-draft {
  background:   var(--sk-bg);
  color:        var(--sk-text-muted);
  border-color: var(--sk-border-strong);
}
.sk-btn-neutral:hover,
.skr-btn-draft:hover {
  background:   var(--sk-bg-muted);
  color:        var(--sk-text);
}

/* Danger (rot) */
.sk-btn-danger,
.skr-btn-trash {
  background:   var(--sk-bg);
  color:        var(--sk-error);
  border-color: var(--sk-error);
}
.sk-btn-danger:hover,
.skr-btn-trash:hover {
  background:   var(--sk-error-bg);
}

/* Button mit Dashicon */
.sk-btn .dashicons,
.button .dashicons {
  font-size:    1em;
  width:        auto;
  height:       auto;
  vertical-align: text-bottom;
  margin-right: var(--sk-space-1);
}

/* ── Formulare ──────────────────────────────────── */

.sk-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="search"],
select,
textarea {
  font-family:    var(--sk-font);
  font-size:      var(--sk-text-base);
  line-height:    var(--sk-leading-normal);
  padding:        var(--sk-space-2) var(--sk-space-3);
  border:         1px solid var(--sk-border-strong);
  border-radius:  var(--sk-radius-sm);
  background:     var(--sk-bg);
  color:          var(--sk-text);
  transition:     border-color var(--sk-transition), box-shadow var(--sk-transition);
  width:          100%;
  box-sizing:     border-box;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--sk-primary);
  box-shadow:   0 0 0 2px var(--sk-primary-light);
  outline:      none;
}

label {
  font-size:    var(--sk-text-sm);
  font-weight:  var(--sk-weight-semibold);
  color:        var(--sk-text);
  display:      block;
  margin-bottom: var(--sk-space-1);
}

/* ── Cards ──────────────────────────────────────── */

.sk-card {
  background:    var(--sk-bg);
  border:        1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  padding:       var(--sk-space-5);
  box-shadow:    var(--sk-shadow-sm);
  transition:    box-shadow var(--sk-transition);
}
.sk-card:hover {
  box-shadow:    var(--sk-shadow);
}

/* ── Tabellen ───────────────────────────────────── */

.sk-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--sk-text-sm);
}
.sk-table th {
  background:    var(--sk-primary);
  color:         #fff;
  font-weight:   var(--sk-weight-semibold);
  padding:       var(--sk-space-2) var(--sk-space-3);
  text-align:    left;
}
.sk-table td {
  padding:       var(--sk-space-2) var(--sk-space-3);
  border-bottom: 1px solid var(--sk-border);
  color:         var(--sk-text);
}
.sk-table tr:hover td {
  background:    var(--sk-bg-subtle);
}

/* ── Badges ─────────────────────────────────────── */

.sk-badge {
  display:       inline-flex;
  align-items:   center;
  font-size:     var(--sk-text-xs);
  font-weight:   var(--sk-weight-semibold);
  padding:       var(--sk-space-1) var(--sk-space-2);
  border-radius: var(--sk-radius-full);
  letter-spacing: var(--sk-tracking-wide);
}
.sk-badge-success {
  background: var(--sk-success-bg);
  color:      var(--sk-success);
  border:     1px solid var(--sk-success-border);
}
.sk-badge-warning {
  background: var(--sk-warning-bg);
  color:      var(--sk-warning);
  border:     1px solid var(--sk-warning-border);
}
.sk-badge-error {
  background: var(--sk-error-bg);
  color:      var(--sk-error);
  border:     1px solid var(--sk-error-border);
}
.sk-badge-info {
  background: var(--sk-info-bg);
  color:      var(--sk-info);
  border:     1px solid var(--sk-info-border);
}

/* ── Sidebar-Block ──────────────────────────────── */

.sk-sidebar {
  background:    var(--sk-sidebar-bg);
  border:        1px solid var(--sk-sidebar-border);
  border-radius: var(--sk-radius-lg);
  padding:       var(--sk-space-5);
}
.sk-sidebar h4 {
  color:         var(--sk-primary);
  font-size:     var(--sk-text-sm);
  font-weight:   var(--sk-weight-bold);
  margin:        0 0 var(--sk-space-3);
}
.sk-sidebar a {
  color:         var(--sk-primary);
  text-decoration: none;
}
.sk-sidebar a:hover {
  color:         var(--sk-primary-hover);
  text-decoration: underline;
}

/* ── Links ──────────────────────────────────────── */

a {
  color:           var(--sk-primary);
  text-decoration: none;
  transition:      color var(--sk-transition);
}
a:hover {
  color:           var(--sk-primary-hover);
  text-decoration: underline;
}

/* ── Headings ───────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--sk-font);
  font-weight:    var(--sk-weight-bold);
  line-height:    var(--sk-leading-tight);
  color:          var(--sk-text);
}
h1 { font-size: var(--sk-text-4xl); letter-spacing: var(--sk-tracking-tight); }
h2 { font-size: var(--sk-text-3xl); letter-spacing: var(--sk-tracking-tight); }
h3 { font-size: var(--sk-text-2xl); }
h4 { font-size: var(--sk-text-xl); }
h5 { font-size: var(--sk-text-lg); }
h6 { font-size: var(--sk-text-base); font-weight: var(--sk-weight-semibold); }