/* =====================================================
   EK4YOU Design System – Tokens
   Hell / Dunkel. Werte werden über [data-theme] gesteuert.
   Legacy-Kompat: --bs-* Variablen sind auf Tokens gemappt.
===================================================== */
@layer reset, tokens, base, components, utilities, legacy;

@layer tokens {
  :root {
    color-scheme: light;

    /* Marke */
    --ds-brand-50:  #e8fbf3;
    --ds-brand-100: #c6f5e1;
    --ds-brand-300: #6fe6b9;
    --ds-brand-500: #17d68f;
    --ds-brand-600: #12b476;
    --ds-brand-700: #0e8f5d;
    --ds-brand-900: #0a4d35;

    /* Typografie */
    --ds-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ds-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
    --ds-text-xs: .75rem;
    --ds-text-sm: .8125rem;
    --ds-text-base: .9375rem;
    --ds-text-lg: 1.0625rem;
    --ds-text-xl: 1.25rem;
    --ds-text-2xl: 1.5rem;
    --ds-text-3xl: 1.875rem;
    --ds-lh: 1.5;

    /* Radius, Spacing, Motion */
    --ds-radius-xs: 4px;
    --ds-radius-sm: 6px;
    --ds-radius: 10px;
    --ds-radius-lg: 14px;
    --ds-radius-xl: 20px;
    --ds-radius-pill: 999px;
    --ds-space: 1rem;
    --ds-ease: cubic-bezier(.2, .7, .2, 1);
    --ds-dur-fast: 120ms;
    --ds-dur: 200ms;
    --ds-dur-slow: 320ms;

    /* Layout */
    --ds-ui-scale: 1;              /* Root-Skalierung (siehe Ultra-HD-Stufen unten) */
    --ds-sidebar-w: 16.25rem;
    --ds-sidebar-w-rail: 4.5rem;
    --ds-topbar-h: 3.625rem;
    --ds-bottomnav-h: 3.75rem;
    --ds-container-max: 90rem;

    /* Z-Ebenen */
    --ds-z-sticky: 1020;
    --ds-z-sidebar: 1040;
    --ds-z-backdrop: 1050;
    --ds-z-modal: 1060;
    --ds-z-dropdown: 1070;
    --ds-z-tooltip: 1080;
    --ds-z-toast: 10100;
  }

  /* ---------- HELL ---------- */
  :root,
  :root[data-theme='light'] {
    --ds-bg:            #f4f6f9;
    --ds-surface:       #ffffff;
    --ds-surface-2:     #f8fafc;
    --ds-surface-3:     #eef2f6;
    --ds-surface-hover: #f1f5f9;
    --ds-overlay:       rgba(15, 23, 42, .5);

    --ds-text:          #0f172a;
    --ds-text-2:        #475569;
    --ds-text-3:        #64748b;
    --ds-text-inverse:  #ffffff;

    --ds-border:        #e2e8f0;
    --ds-border-strong: #cbd5e1;

    --ds-accent:        #0e8f5d;   /* Text/Links auf hellem Grund (AA) */
    --ds-accent-fill:   #17d68f;   /* Flächen */
    --ds-accent-hover:  #12b476;
    --ds-accent-text:   #06281c;   /* Text auf Accent-Fläche */
    --ds-accent-soft:   #e8fbf3;
    --ds-focus:         rgba(23, 214, 143, .45);

    --ds-info:    #2563eb; --ds-info-soft:    #e8f0fe; --ds-info-text:    #1d4ed8;
    --ds-success: #16a34a; --ds-success-soft: #e6f7ec; --ds-success-text: #166534;
    --ds-warning: #d97706; --ds-warning-soft: #fff4dc; --ds-warning-text: #92400e;
    --ds-danger:  #dc2626; --ds-danger-soft:  #fdeaea; --ds-danger-text:  #991b1b;

    --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --ds-shadow:    0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --ds-shadow-lg: 0 20px 40px -8px rgba(15, 23, 42, .18), 0 8px 16px -8px rgba(15, 23, 42, .1);

    --ds-sidebar-bg:    #ffffff;
    --ds-sidebar-text:  #334155;
    --ds-sidebar-hover: #f1f5f9;
    --ds-sidebar-active-bg: #e8fbf3;
    --ds-sidebar-active-text: #0e8f5d;
    --ds-topbar-bg:     rgba(255, 255, 255, .82);
    --ds-scrollbar:     #cbd5e1;
  }

  /* ---------- DUNKEL ---------- */
  :root[data-theme='dark'] {
    color-scheme: dark;
    --ds-bg:            #0b1017;
    --ds-surface:       #131a23;
    --ds-surface-2:     #18212c;
    --ds-surface-3:     #1f2a37;
    --ds-surface-hover: #1c2632;
    --ds-overlay:       rgba(0, 0, 0, .62);

    --ds-text:          #e8edf3;
    --ds-text-2:        #a7b3c2;
    --ds-text-3:        #8493a5;
    --ds-text-inverse:  #0b1017;

    --ds-border:        #263241;
    --ds-border-strong: #364558;

    --ds-accent:        #3de3a6;
    --ds-accent-fill:   #17d68f;
    --ds-accent-hover:  #3de3a6;
    --ds-accent-text:   #04231a;
    --ds-accent-soft:   rgba(23, 214, 143, .14);
    --ds-focus:         rgba(61, 227, 166, .45);

    --ds-info:    #60a5fa; --ds-info-soft:    rgba(96, 165, 250, .15); --ds-info-text:    #93c5fd;
    --ds-success: #4ade80; --ds-success-soft: rgba(74, 222, 128, .14); --ds-success-text: #86efac;
    --ds-warning: #fbbf24; --ds-warning-soft: rgba(251, 191, 36, .15); --ds-warning-text: #fcd34d;
    --ds-danger:  #f87171; --ds-danger-soft:  rgba(248, 113, 113, .15); --ds-danger-text: #fca5a5;

    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --ds-shadow:    0 6px 16px rgba(0, 0, 0, .45);
    --ds-shadow-lg: 0 24px 48px -8px rgba(0, 0, 0, .65);

    --ds-sidebar-bg:    #0e141c;
    --ds-sidebar-text:  #b6c2d0;
    --ds-sidebar-hover: #17202b;
    --ds-sidebar-active-bg: rgba(23, 214, 143, .14);
    --ds-sidebar-active-text: #3de3a6;
    --ds-topbar-bg:     rgba(19, 26, 35, .82);
    --ds-scrollbar:     #364558;
  }

  /* System-Modus: ohne data-theme folgt das Design dem OS */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      --ds-bg: #0b1017; --ds-surface: #131a23; --ds-surface-2: #18212c; --ds-surface-3: #1f2a37;
      --ds-surface-hover: #1c2632; --ds-overlay: rgba(0,0,0,.62);
      --ds-text: #e8edf3; --ds-text-2: #a7b3c2; --ds-text-3: #8493a5; --ds-text-inverse: #0b1017;
      --ds-border: #263241; --ds-border-strong: #364558;
      --ds-accent: #3de3a6; --ds-accent-fill: #17d68f; --ds-accent-hover: #3de3a6; --ds-accent-text: #04231a;
      --ds-accent-soft: rgba(23,214,143,.14); --ds-focus: rgba(61,227,166,.45);
      --ds-info: #60a5fa; --ds-info-soft: rgba(96,165,250,.15); --ds-info-text: #93c5fd;
      --ds-success: #4ade80; --ds-success-soft: rgba(74,222,128,.14); --ds-success-text: #86efac;
      --ds-warning: #fbbf24; --ds-warning-soft: rgba(251,191,36,.15); --ds-warning-text: #fcd34d;
      --ds-danger: #f87171; --ds-danger-soft: rgba(248,113,113,.15); --ds-danger-text: #fca5a5;
      --ds-shadow-xs: 0 1px 2px rgba(0,0,0,.4); --ds-shadow-sm: 0 1px 3px rgba(0,0,0,.5);
      --ds-shadow: 0 6px 16px rgba(0,0,0,.45); --ds-shadow-lg: 0 24px 48px -8px rgba(0,0,0,.65);
      --ds-sidebar-bg: #0e141c; --ds-sidebar-text: #b6c2d0; --ds-sidebar-hover: #17202b;
      --ds-sidebar-active-bg: rgba(23,214,143,.14); --ds-sidebar-active-text: #3de3a6;
      --ds-topbar-bg: rgba(19,26,35,.82); --ds-scrollbar: #364558;
    }
  }

  /* ---------- Legacy-Kompat: Bootstrap-Variablen auf Tokens ---------- */
  :root {
    --bs-body-bg: var(--ds-bg);
    --bs-body-color: var(--ds-text);
    --bs-emphasis-color: var(--ds-text);
    --bs-secondary-color: var(--ds-text-2);
    --bs-tertiary-color: var(--ds-text-3);
    --bs-secondary-bg: var(--ds-surface-3);
    --bs-tertiary-bg: var(--ds-surface-2);
    --bs-border-color: var(--ds-border);
    --bs-border-color-translucent: var(--ds-border);
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-radius: var(--ds-radius-sm);
    --bs-border-radius-sm: var(--ds-radius-xs);
    --bs-border-radius-lg: var(--ds-radius);
    --bs-border-radius-xl: var(--ds-radius-lg);
    --bs-border-radius-xxl: var(--ds-radius-xl);
    --bs-border-radius-pill: var(--ds-radius-pill);
    --bs-link-color: var(--ds-accent);
    --bs-link-hover-color: var(--ds-accent-hover);
    --bs-primary: var(--ds-accent-fill);
    --bs-success: var(--ds-success);
    --bs-info: var(--ds-info);
    --bs-warning: var(--ds-warning);
    --bs-danger: var(--ds-danger);
    --bs-secondary: var(--ds-text-3);
    --bs-light: var(--ds-surface-3);
    --bs-dark: var(--ds-text);
    --bs-white: #fff;
    --bs-font-sans-serif: var(--ds-font);
    --bs-body-font-family: var(--ds-font);
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    --bs-primary-text-emphasis: var(--ds-accent);
    --bs-success-text-emphasis: var(--ds-success-text);
    --bs-warning-text-emphasis: var(--ds-warning-text);
    --bs-danger-text-emphasis: var(--ds-danger-text);
    --bs-info-text-emphasis: var(--ds-info-text);
    --bs-secondary-text-emphasis: var(--ds-text-2);
    --bs-primary-bg-subtle: var(--ds-accent-soft);
    --bs-success-bg-subtle: var(--ds-success-soft);
    --bs-warning-bg-subtle: var(--ds-warning-soft);
    --bs-danger-bg-subtle: var(--ds-danger-soft);
    --bs-info-bg-subtle: var(--ds-info-soft);
  }
  /* Theme-abhängige RGB-Werte (Bootstrap nutzt rgba(var(--bs-*-rgb), x)) */
  :root, :root[data-theme='light'] {
    --bs-primary-rgb: 23, 214, 143; --bs-success-rgb: 22, 163, 74; --bs-info-rgb: 37, 99, 235;
    --bs-warning-rgb: 217, 119, 6; --bs-danger-rgb: 220, 38, 38; --bs-secondary-rgb: 100, 116, 139;
    --bs-light-rgb: 238, 242, 246; --bs-dark-rgb: 15, 23, 42;
    --bs-body-color-rgb: 15, 23, 42; --bs-emphasis-color-rgb: 15, 23, 42; --bs-body-bg-rgb: 244, 246, 249;
  }
  :root[data-theme='dark'] {
    --bs-primary-rgb: 23, 214, 143; --bs-success-rgb: 74, 222, 128; --bs-info-rgb: 96, 165, 250;
    --bs-warning-rgb: 251, 191, 36; --bs-danger-rgb: 248, 113, 113; --bs-secondary-rgb: 132, 147, 165;
    --bs-light-rgb: 31, 42, 55; --bs-dark-rgb: 232, 237, 243;
    --bs-body-color-rgb: 232, 237, 243; --bs-emphasis-color-rgb: 232, 237, 243; --bs-body-bg-rgb: 11, 16, 23;
  }

  /* Alt-Variablen aus ek4ystyle.css theme-fähig machen */
  :root {
    --ek4y-green: var(--ds-accent-fill);
    --muted: var(--ds-text-3);
    --bg: var(--ds-bg);
    --card-bg: var(--ds-surface);
    --border: var(--ds-border);
    --shadow-1: var(--ds-shadow);
    --sidebar-width: var(--ds-sidebar-w);
  }
}

/* =====================================================
   Ultra-HD / 4K: Root-Skalierung + breitere Inhaltsfläche
   Stufen gelten für CSS-Pixel (Bildschirm / OS-Skalierung), z. B. 3840 px @ 150 % = 2560 px.
   Manuell überschreibbar über <html data-ui-scale="0.9|1|1.1|1.25|1.5"> (assets/js/ds/scale.js).
===================================================== */
@layer tokens {
  @media (min-width: 1920px) { :root { --ds-container-max: 105rem; } }
  @media (min-width: 2560px) { :root { --ds-ui-scale: 1.125; --ds-container-max: 120rem; } }
  @media (min-width: 3440px) { :root { --ds-ui-scale: 1.25; --ds-container-max: 135rem; } }
  @media (min-width: 3840px) { :root { --ds-ui-scale: 1.5; --ds-container-max: 150rem; } }
  :root[data-ui-scale='0.9'] { --ds-ui-scale: .9; }
  :root[data-ui-scale='1'] { --ds-ui-scale: 1; }
  :root[data-ui-scale='1.1'] { --ds-ui-scale: 1.1; }
  :root[data-ui-scale='1.25'] { --ds-ui-scale: 1.25; }
  :root[data-ui-scale='1.5'] { --ds-ui-scale: 1.5; }
}