/* ==========================================================================
   surakarta.eu – Design-Tokens (Custom Properties)
   Theme: dark  = „Mitternachts-Teal" (Standard)
          light = „Sand"
   Alle Farben, Radien, Schatten, Abstände und Typo-Regeln laufen über diese
   Tokens. Kein !important, keine harten Werte in Komponenten-Dateien.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- Typografie ---------- */
  --sk-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --sk-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Source Code Pro",
    Menlo, Consolas, "Liberation Mono", monospace;
  --sk-font-base: 16px;
  --sk-font-xs: 0.75rem;    /* 12px */
  --sk-font-sm: 0.875rem;   /* 14px */
  --sk-font-md: 1rem;       /* 16px */
  --sk-font-lg: 1.125rem;   /* 18px */
  --sk-font-xl: 1.375rem;   /* 22px */
  --sk-font-2xl: 1.75rem;   /* 28px */
  --sk-font-3xl: 2.25rem;   /* 36px */
  --sk-font-4xl: 3rem;      /* 48px */
  --sk-lh-tight: 1.15;
  --sk-lh-body: 1.6;

  /* ---------- Abstände (4-px-Raster) ---------- */
  --sk-space-1: 0.25rem;
  --sk-space-2: 0.5rem;
  --sk-space-3: 0.75rem;
  --sk-space-4: 1rem;
  --sk-space-5: 1.5rem;
  --sk-space-6: 2rem;
  --sk-space-7: 3rem;
  --sk-space-8: 4rem;
  --sk-space-9: 6rem;

  /* ---------- Radien ---------- */
  --sk-radius-sm: 6px;
  --sk-radius-md: 10px;
  --sk-radius-lg: 14px;
  --sk-radius-xl: 20px;
  --sk-radius-pill: 999px;

  /* ---------- Schatten ---------- */
  --sk-shadow-sm: 0 1px 2px rgba(2, 8, 20, 0.35), 0 1px 6px rgba(2, 8, 20, 0.2);
  --sk-shadow-md: 0 4px 12px rgba(2, 8, 20, 0.35), 0 2px 24px rgba(2, 8, 20, 0.25);
  --sk-shadow-lg: 0 12px 32px rgba(2, 8, 20, 0.5), 0 4px 48px rgba(2, 8, 20, 0.35);
  --sk-shadow-focus: 0 0 0 3px var(--sk-focus-ring);

  /* ---------- Bewegung ---------- */
  --sk-dur-fast: 120ms;
  --sk-dur-base: 200ms;
  --sk-dur-slow: 320ms;
  --sk-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sk-ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);

  /* ---------- Z-Index-Skala ---------- */
  --sk-z-header: 50;
  --sk-z-dropdown: 80;
  --sk-z-toast: 120;
  --sk-z-modal: 140;

  /* ---------- Layout ---------- */
  --sk-header-h: 60px;
  --sk-content-max: 1280px;
  --sk-board-max: 560px;
}

/* ==========================================================================
   DUNKLES THEME (Standard) – „Mitternachts-Teal"
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --sk-bg: #0b1220;
  --sk-bg-soft: #0e1728;
  --sk-surface: #111c2e;
  --sk-surface-2: #16233a;
  --sk-surface-3: #1c2c47;
  --sk-border: #22334d;
  --sk-border-strong: #2f4566;
  --sk-text: #e6edf7;
  --sk-text-strong: #f6faff;
  --sk-muted: #8fa3bd;
  --sk-faint: #6b7f9c;

  --sk-accent: #14b8a6;
  --sk-accent-strong: #0d9488;
  --sk-accent-soft: rgba(20, 184, 166, 0.14);
  --sk-accent-contrast: #04201c;
  --sk-on-accent: #ffffff;
  --sk-accent-text: #14b8a6;

  --sk-accent2: #38bdf8;
  --sk-accent2-soft: rgba(56, 189, 248, 0.14);
  --sk-on-accent2: #ffffff;
  --sk-accent2-text: #38bdf8;
  --sk-link: #38bdf8;

  /* Primär-Buttons: tiefere Teal-Stufe der Marken-Familie, weißer Text
     (≥ 4,5:1 gegen Button UND Seitenhintergrund – WCAG AA) */
  --sk-btn-primary-grad: linear-gradient(180deg, #0f766e, #115e59);
  --sk-btn-accent2-grad: linear-gradient(180deg, #0369a1, #075985);

  --sk-danger: #f87171;
  --sk-danger-strong: #dc2626;
  --sk-danger-soft: rgba(248, 113, 113, 0.14);
  --sk-on-danger: #2a0707;

  --sk-warn: #fbbf24;
  --sk-warn-soft: rgba(251, 191, 36, 0.14);
  --sk-on-warn: #2a1c02;

  --sk-success: #34d399;
  --sk-success-soft: rgba(52, 211, 153, 0.14);
  --sk-on-success: #04241a;

  --sk-focus-ring: rgba(56, 189, 248, 0.55);

  --sk-overlay: rgba(4, 8, 18, 0.72);

  /* Schatten im Dunkel-Theme tiefer */
  --sk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --sk-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 2px 28px rgba(0, 0, 0, 0.35);
  --sk-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6), 0 6px 60px rgba(0, 0, 0, 0.45);

  /* ---------- Brett-Tokens (Thema „Jade", Standard) ---------- */
  --sk-board-bg: #13263a;
  --sk-board-bg-2: #0f2033;
  --sk-board-line: #5e789a;
  --sk-board-point: #8fa8c8;
  --sk-board-coord: #6b85a6;
  --sk-piece-white: #f4f7fb;
  --sk-piece-white-ring: #c7d4e4;
  --sk-piece-white-idle: #e8eef6;
  --sk-piece-black: #10161f;
  --sk-piece-black-ring: #02070d;
  --sk-piece-black-idle: #1a2230;
  --sk-board-last-move: rgba(56, 189, 248, 0.28);
  --sk-board-legal: #14b8a6;
  --sk-board-selected: #38bdf8;
  --sk-board-check-warn: #fbbf24;
}

/* ==========================================================================
   HELLES THEME – „Sand"
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --sk-bg: #f6f1e7;
  --sk-bg-soft: #efe8d9;
  --sk-surface: #fffdf7;
  --sk-surface-2: #f7f1e4;
  --sk-surface-3: #efe7d5;
  --sk-border: #d8cfba;
  --sk-border-strong: #c2b698;
  --sk-text: #1f2937;
  --sk-text-strong: #101827;
  --sk-muted: #5f6b7d;
  --sk-faint: #57687b;

  --sk-accent: #0d9488;
  --sk-accent-strong: #0f766e;
  --sk-accent-soft: rgba(13, 148, 136, 0.12);
  --sk-on-accent: #04201c;
  --sk-accent-contrast: #ffffff;
  --sk-accent-text: #0f766e;

  --sk-accent2: #0284c7;
  --sk-accent2-soft: rgba(2, 132, 199, 0.1);
  --sk-on-accent2: #04263a;
  --sk-accent2-text: #0369a1;
  --sk-link: #0369a1;

  /* Helle Primär-Buttons: Brand-Teal mit dunklem Text
     (≥ 4,5:1 gegen Button UND Seitenhintergrund – WCAG AA) */
  --sk-btn-primary-grad: linear-gradient(180deg, #2dd4bf, #14b8a6);
  --sk-btn-accent2-grad: linear-gradient(180deg, #7dd3fc, #38bdf8);

  --sk-danger: #b91c1c;
  --sk-danger-strong: #991b1b;
  --sk-danger-soft: rgba(220, 38, 38, 0.1);
  --sk-on-danger: #ffffff;

  --sk-warn: #92400e;
  --sk-warn-soft: rgba(180, 83, 9, 0.12);
  --sk-on-warn: #ffffff;

  --sk-success: #047857;
  --sk-success-soft: rgba(4, 120, 87, 0.1);
  --sk-on-success: #ffffff;

  --sk-focus-ring: rgba(2, 132, 199, 0.5);

  --sk-overlay: rgba(56, 48, 30, 0.45);

  --sk-shadow-sm: 0 1px 2px rgba(90, 76, 45, 0.14), 0 1px 6px rgba(90, 76, 45, 0.08);
  --sk-shadow-md: 0 4px 12px rgba(90, 76, 45, 0.16), 0 2px 24px rgba(90, 76, 45, 0.1);
  --sk-shadow-lg: 0 12px 32px rgba(90, 76, 45, 0.22), 0 4px 48px rgba(90, 76, 45, 0.14);

  /* ---------- Brett-Tokens (Thema „Jade" auf Sand) ---------- */
  --sk-board-bg: #fffdf7;
  --sk-board-bg-2: #f3ecdd;
  --sk-board-line: #8a7f68;
  --sk-board-point: #6f6650;
  --sk-board-coord: #9c9178;
  --sk-piece-white: #ffffff;
  --sk-piece-white-ring: #b9b09a;
  --sk-piece-white-idle: #f4efe4;
  --sk-piece-black: #232a36;
  --sk-piece-black-ring: #0b0f16;
  --sk-piece-black-idle: #39424f;
  --sk-board-last-move: rgba(2, 132, 199, 0.22);
  --sk-board-legal: #0d9488;
  --sk-board-selected: #0284c7;
  --sk-board-check-warn: #b45309;
}

/* ==========================================================================
   Brett-Themen (nur Brett-Palette, unabhängig vom Seiten-Theme)
   ========================================================================== */
[data-board-theme="jade"] {
  --sk-board-bg: #13263a;
  --sk-board-bg-2: #0f2033;
  --sk-board-line: #5e789a;
  --sk-board-point: #8fa8c8;
  --sk-board-coord: #6b85a6;
  --sk-piece-white: #f4f7fb;
  --sk-piece-white-ring: #c7d4e4;
  --sk-piece-white-idle: #e8eef6;
  --sk-piece-black: #10161f;
  --sk-piece-black-ring: #02070d;
  --sk-piece-black-idle: #1a2230;
  --sk-board-last-move: rgba(56, 189, 248, 0.28);
  --sk-board-legal: #14b8a6;
  --sk-board-selected: #38bdf8;
}
[data-board-theme="sand"] {
  --sk-board-bg: #f4ead8;
  --sk-board-bg-2: #ecdfc8;
  --sk-board-line: #7d6f55;
  --sk-board-point: #5f543e;
  --sk-board-coord: #94886c;
  --sk-piece-white: #fffdf6;
  --sk-piece-white-ring: #c3b694;
  --sk-piece-white-idle: #f7f0e1;
  --sk-piece-black: #26200f;
  --sk-piece-black-ring: #120e04;
  --sk-piece-black-idle: #453b22;
  --sk-board-last-move: rgba(2, 132, 199, 0.25);
  --sk-board-legal: #0d9488;
  --sk-board-selected: #0284c7;
}
[data-board-theme="lavendel"] {
  --sk-board-bg: #241d33;
  --sk-board-bg-2: #1d1729;
  --sk-board-line: #7a6a9c;
  --sk-board-point: #a293c4;
  --sk-board-coord: #837598;
  --sk-piece-white: #f2eef9;
  --sk-piece-white-ring: #c3b6dd;
  --sk-piece-white-idle: #e4ddf1;
  --sk-piece-black: #171223;
  --sk-piece-black-ring: #06040c;
  --sk-piece-black-idle: #221b34;
  --sk-board-last-move: rgba(167, 139, 250, 0.3);
  --sk-board-legal: #a78bfa;
  --sk-board-selected: #c4b5fd;
}