/* SmileSketch Design System – zentrale Tokens. Quelle: Claude-Design-Export (tokens/colors.css, spacing.css, typography.css).
   Farben nur hier pflegen; admin.css und event-admin.css verwenden ausschließlich diese Variablen. */
:root{
/* Base palette (from brief) */
--color-background:#FAFBF7;
--color-surface:#FFFFFF;
--color-surface-soft:#F0F2EA;
--color-surface-green:#EDF2E4;
--color-text:#152C2D;
--color-on-lime:#152C2D;
--color-text-muted:#62685F;
--color-text-on-dark:#FFFFFF;
--color-text-on-dark-muted:#B9C7CA;
--color-brand-dark:#112B37;
--color-brand-lime:#D5FA42;
--color-brand-green:#527032;
--color-border:#DCE0D6;
--color-border-strong:#CAD4BD;
--color-focus:#69992C;

/* Semantic (from brief) */
--color-success:#3F7D3A;
--color-success-soft:#E7F2E2;
--color-warning:#B87318;
--color-warning-soft:#FFF1D8;
--color-error:#B9473F;
--color-error-soft:#FBE7E5;
--color-info:#3B6F89;
--color-info-soft:#E5F0F5;

/* Derived — text on soft status fills (WCAG AA ≥4.5:1). #B87318 is only 3.8:1 on white, so never use it for small text. */
--color-success-text:#2F6A2B;
--color-warning-text:#8A5410;
--color-error-text:#9E3A33;
--color-info-text:#2E5D74;
--color-success-border:#C3DDB9;
--color-warning-border:#F1D3A0;
--color-error-border:#F0C3BE;
--color-info-border:#BFD8E4;

/* Derived — interaction */
--color-lime-hover:#C9EE32;
--color-lime-active:#BCE024;
--color-lime-soft:#F2FCCB;
--color-ink-hover:#294341;
--color-ink-active:#0D2122;
--color-tertiary-border:#C8CEC5;
--color-tertiary-hover:#EDF0E4;
--color-tertiary-active:#E2E7D6;
--color-input-border:#CBD2C6;
--color-input-border-hover:#AEB8A6;
--color-row-hover:#F6F8F1;
--color-disabled-bg:#F0F2EA;
--color-disabled-text:#9BA197;
--color-disabled-border:#E3E6DE;
--color-error-hover:#A23D36;
--color-overlay:rgba(17,43,55,.44);
--color-dark-hover:rgba(255,255,255,.07);
--color-dark-active:rgba(213,250,66,.14);
--color-dark-border:rgba(255,255,255,.12);

/* Charts — order of use */
--chart-1:#112B37;
--chart-2:#D5FA42;
--chart-3:#527032;
--chart-4:#3B6F89;
--chart-grid:#DCE0D6;

/* Semantic aliases */
--bg-page:var(--color-background);
--surface-card:var(--color-surface);
--surface-raised:var(--color-surface);
--surface-muted:var(--color-surface-soft);
--surface-accent:var(--color-surface-green);
--surface-inverse:var(--color-brand-dark);
--text-body:var(--color-text);
--text-secondary:var(--color-text-muted);
--text-inverse:var(--color-text-on-dark);
--text-inverse-muted:var(--color-text-on-dark-muted);
--border-default:var(--color-border);
--border-strong:var(--color-border-strong);
--table-header:var(--color-surface-soft);
--table-divider:var(--color-border);
--table-selected:var(--color-surface-green);
--action-primary:var(--color-brand-lime);
--action-primary-hover:var(--color-lime-hover);
--action-secondary:var(--color-text);
--action-secondary-hover:var(--color-ink-hover);
--focus-ring:0 0 0 3px rgba(105,153,44,.24);
--focus-ring-error:0 0 0 3px rgba(185,71,63,.18);
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;

/* Radii — brand rule: 8–12px. Round only for functional shapes (radio, switch). */
--radius-sm:8px;--radius-md:10px;--radius-lg:12px;--radius-check:5px;--radius-round:999px;

/* Shadows — petrol-tinted, very soft, sparing */
--shadow-xs:0 1px 2px rgba(17,43,55,.05);
--shadow-sm:0 1px 2px rgba(17,43,55,.04),0 2px 8px rgba(17,43,55,.04);
--shadow-md:0 2px 4px rgba(17,43,55,.04),0 8px 24px rgba(17,43,55,.07);
--shadow-lg:0 4px 8px rgba(17,43,55,.05),0 24px 48px -12px rgba(17,43,55,.20);

/* Control heights */
--control-sm:32px;--control-md:40px;--control-lg:48px;

/* Layout */
--sidebar-width:248px;--topbar-height:64px;--content-max:1240px;

/* Motion */
--ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:260ms; /* @kind other */
}

:root{
--font-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
--font-sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;

--fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-16:16px;--fs-18:18px;--fs-20:20px;--fs-24:24px;--fs-30:30px;--fs-38:38px;--fs-48:48px;
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--lh-tight:1.15; /* @kind font */
--lh-snug:1.3; /* @kind font */
--lh-normal:1.5; /* @kind font */
--tracking-display:-0.02em;--tracking-caps:0.06em;

/* Roles */
--type-display:600 var(--fs-48)/1.05 var(--font-display);
--type-h1:600 var(--fs-30)/1.15 var(--font-display);
--type-h2:600 var(--fs-24)/1.2 var(--font-display);
--type-h3:600 var(--fs-18)/1.3 var(--font-sans);
--type-body:400 var(--fs-14)/1.5 var(--font-sans);
--type-body-lg:400 var(--fs-16)/1.5 var(--font-sans);
--type-label:600 var(--fs-13)/1.3 var(--font-sans);
--type-caption:400 var(--fs-12)/1.4 var(--font-sans);
--type-overline:600 var(--fs-11)/1.3 var(--font-sans);
--type-mono:400 var(--fs-13)/1.4 var(--font-mono);
}

/* Darkmode: dieselben Token-Namen, petrolfarbene Flächen. Lime bleibt die Aktionsfarbe, Schrift darauf bleibt dunkel. */
html[data-theme="dark"]{
color-scheme:dark;
--color-background:#0E1A22;
--color-surface:#16303C;
--color-surface-soft:#1C3A48;
--color-surface-green:#1A3324;
--color-text:#F3F6F4;
--color-text-muted:#B9C7CA;
--color-text-on-dark:#F3F6F4;
--color-text-on-dark-muted:#B9C7CA;
--color-on-lime:#152C2D;
--color-brand-dark:#07141A;
--color-brand-green:#9ED06A;
--color-border:rgba(255,255,255,.12);
--color-border-strong:rgba(255,255,255,.22);
--color-focus:#D5FA42;
--color-success:#7DCA76;
--color-success-soft:#1A3324;
--color-warning:#E6B15A;
--color-warning-soft:#3A2C14;
--color-error:#F0A29B;
--color-error-soft:#3A2220;
--color-info:#9EC4D8;
--color-info-soft:#163044;
--color-success-text:#B7E0B2;
--color-warning-text:#F0D199;
--color-error-text:#F5C2BC;
--color-info-text:#C5DDEA;
--color-success-border:#2F5A3A;
--color-warning-border:#6A5324;
--color-error-border:#6A3A34;
--color-info-border:#2E5D74;
--color-lime-soft:#2A3A12;
--color-ink-hover:#D5E0DC;
--color-ink-active:#FFFFFF;
--color-tertiary-border:rgba(255,255,255,.18);
--color-tertiary-hover:rgba(255,255,255,.07);
--color-tertiary-active:rgba(255,255,255,.12);
--color-input-border:rgba(255,255,255,.18);
--color-input-border-hover:rgba(255,255,255,.32);
--color-row-hover:rgba(255,255,255,.05);
--color-disabled-bg:#1A2A32;
--color-disabled-text:#7E8E92;
--color-disabled-border:rgba(255,255,255,.08);
--color-overlay:rgba(0,0,0,.55);
--chart-1:#D5FA42;
--chart-grid:rgba(255,255,255,.12);
--focus-ring:0 0 0 3px rgba(213,250,66,.28);
--shadow-xs:0 1px 2px rgba(0,0,0,.35);
--shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.25);
--shadow-md:0 8px 24px rgba(0,0,0,.35);
--shadow-lg:0 24px 48px rgba(0,0,0,.45);
}