/* Strauch's Designsystem 1.1 - tokens.css
   Gemeinsame Gestaltungswerte fuer Hotel-Buchung, Schichtplaner, Mittagstisch, Tischplaner.
   Kontrastwerte: siehe README.md (Tabelle, berechnet nach WCAG 2.x).
   Keine externen Ressourcen. Schrift: lokal, SIL OFL 1.1 (fonts/OFL.txt). */

/* ---------- Schrift (lokal, relativ zu dieser Datei) ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-Regular.16653d2ae0a9.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-Italic.907276a139c7.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-Bold.219587669913.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Unabhaengige Tokens (Theme-unabhaengig) ---------- */
:root {
  /* Typo: Basis 18 px (1.125rem); rem, damit Browser-Schriftgroesse/Zoom wirkt */
  --sd-font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sd-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --sd-fs-meta: 1rem;        /* 16 px  Kleingedrucktes, Zeitstempel (nie kleiner) */
  --sd-fs-base: 1.125rem;    /* 18 px  Fliesstext, Felder, Knoepfe */
  --sd-fs-lead: 1.25rem;     /* 20 px  Einleitung, Listentitel */
  --sd-fs-h3: 1.375rem;      /* 22 px */
  --sd-fs-h2: 1.75rem;       /* 28 px */
  --sd-fs-h1: 2.25rem;       /* 36 px */
  --sd-fs-display: 3rem;     /* 48 px  Uhrzeiten, Zaehler, einzelne grosse Zahl */
  --sd-lh-text: 1.55;
  --sd-lh-head: 1.2;
  --sd-measure: 68ch;

  /* Abstaende (4-px-Raster) */
  --sd-space-1: .25rem; --sd-space-2: .5rem; --sd-space-3: .75rem; --sd-space-4: 1rem;
  --sd-space-5: 1.5rem; --sd-space-6: 2rem; --sd-space-7: 3rem; --sd-space-8: 4rem;

  /* Radien */
  --sd-radius-sm: 6px; --sd-radius: 10px; --sd-radius-lg: 16px; --sd-radius-pill: 999px;

  /* Trefferflaechen */
  --sd-target: 48px;          /* Minimum (WCAG 2.2 AAA: 44, Material: 48) */
  --sd-target-lg: 56px;       /* grobe Zeiger (Tablet/Handy): Hauptaktionen */
  --sd-gap-min: 8px;          /* Mindestabstand zwischen Trefferflaechen */
  --sd-border-w: 2px;

  /* Layout */
  --sd-container: 72rem;
  --sd-container-narrow: 40rem;
  --sd-gutter: 1rem;
  --sd-nav-h: 4.5rem;         /* Hoehe der mobilen Navigationsleiste */

  /* Bewegung */
  --sd-ease: cubic-bezier(.2, .7, .2, 1);
  --sd-dur-fast: 120ms; --sd-dur: 200ms; --sd-dur-slow: 320ms;

  /* z-index */
  --sd-z-base: 0; --sd-z-sticky: 100; --sd-z-nav: 200; --sd-z-dropdown: 300;
  --sd-z-overlay: 400; --sd-z-dialog: 500; --sd-z-toast: 600;
}
@media (min-width: 48em) { :root { --sd-gutter: 1.5rem; } }
@media (min-width: 64em) { :root { --sd-gutter: 2rem; } }
@media (pointer: fine) and (min-width: 64em) { :root { --sd-target-lg: 52px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --sd-dur-fast: .01ms; --sd-dur: .01ms; --sd-dur-slow: .01ms; }
}


/* ---------- 1.1: neue, theme-unabhaengige Tokens (nur Ergaenzungen) ---------- */
:root {
  --sd-version: "1.1";
  --sd-fs-hero: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);   /* 36-48 px: Seitentitel im Masthead */
  --sd-ls-tight: -.02em;                                 /* Ueberschriften enger gesetzt */
  --sd-ls-eyebrow: .04em;                                /* Kontextzeile */
  --sd-dur-ui: 160ms;                                    /* Hover/Pressed (150-250 ms) */
  --sd-dur-pop: 420ms;                                   /* Erfolgs-Moment */
  --sd-ease-pop: cubic-bezier(.3, 1.35, .5, 1);
  --sd-bon-notch: var(--sd-bg);                          /* Farbe hinter Kerben/Zacken der Bon-Karte (= Untergrund der Karte) */
}

/* ---------- Farben HELL (Standard) ---------- */
:root {
  --sd-bg: #f4f6f1;
  --sd-surface: #ffffff;
  --sd-sunken: #e8ece3;
  --sd-ink: #17231b;
  --sd-ink-muted: #4a584e;
  --sd-border-strong: #6b7766;
  --sd-accent: #1e5a32;
  --sd-accent-hover: #174726;
  --sd-on-accent: #ffffff;
  --sd-accent-soft: #e0edd3;
  --sd-signature: #95c11a;
  --sd-success: #1b6b34;
  --sd-success-bg: #e1f2e4;
  --sd-warning: #6b4700;
  --sd-warning-bg: #fff0c2;
  --sd-danger: #a4161a;
  --sd-danger-bg: #fde6e4;
  --sd-info: #0b5394;
  --sd-info-bg: #e1eefa;
  --sd-danger-solid: #b3201f;
  --sd-line: #cfd6c8;            /* dekorative Trennlinie, trägt keine Information */
  --sd-focus: #17231b;           /* = ink, 14.9:1 */
  --sd-on-danger-solid: #ffffff;
  --sd-overlay: rgba(14, 21, 16, .55);
  --sd-hover: rgba(30, 90, 50, .08);
  --sd-shadow-color: 150 60% 8%;
  --sd-surface-raised: #ffffff;           /* 1.1: erhoehte Flaeche (Dialog, Bon, Kartenhover) */
  --sd-edge: rgba(255, 255, 255, .9);     /* 1.1: Lichtkante oben auf Karten */
  --sd-perf: #6b7766;                     /* 1.1: Perforationspunkte (Dekor) */
  --sd-paper-dot: hsl(150 60% 8% / .05);  /* 1.1: Papier-Raster, Dekor */
  color-scheme: light;
  --sd-shadow-1: 0 1px 2px hsl(var(--sd-shadow-color) / .10), 0 1px 1px hsl(var(--sd-shadow-color) / .06);
  --sd-shadow-2: 0 4px 12px hsl(var(--sd-shadow-color) / .12), 0 1px 3px hsl(var(--sd-shadow-color) / .08);
  --sd-shadow-3: 0 16px 40px hsl(var(--sd-shadow-color) / .22), 0 2px 8px hsl(var(--sd-shadow-color) / .10);
}

/* ---------- Farben DUNKEL: System-Einstellung, ausser Seite erzwingt hell ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sd-bg: #0e1510;
    --sd-surface: #161f18;
    --sd-sunken: #0a100c;
    --sd-ink: #edf2ea;
    --sd-ink-muted: #a9b6aa;
    --sd-border-strong: #7f8f82;
    --sd-accent: #9ccb2a;
    --sd-accent-hover: #b2dd45;
    --sd-on-accent: #0e1510;
    --sd-accent-soft: #22301a;
    --sd-signature: #95c11a;
    --sd-success: #7fd494;
    --sd-success-bg: #12301c;
    --sd-warning: #f2c14e;
    --sd-warning-bg: #3a2c07;
    --sd-danger: #ff9a94;
    --sd-danger-bg: #3f1214;
    --sd-info: #8cc2ff;
    --sd-info-bg: #11294a;
    --sd-danger-solid: #ff8a84;
    --sd-line: #2a382d;
    --sd-focus: #edf2ea;
    --sd-on-danger-solid: #0e1510;
    --sd-overlay: rgba(0, 0, 0, .65);
    --sd-hover: rgba(156, 203, 42, .10);
    --sd-shadow-color: 0 0% 0%;
    --sd-surface-raised: #1b2620;
    --sd-edge: rgba(255, 255, 255, .06);
    --sd-perf: #7f8f82;
    --sd-paper-dot: rgba(237, 242, 234, .05);
    color-scheme: dark;
  }
}
/* ---------- Farben DUNKEL: manueller Schalter ---------- */
:root[data-theme="dark"] {
  --sd-bg: #0e1510;
  --sd-surface: #161f18;
  --sd-sunken: #0a100c;
  --sd-ink: #edf2ea;
  --sd-ink-muted: #a9b6aa;
  --sd-border-strong: #7f8f82;
  --sd-accent: #9ccb2a;
  --sd-accent-hover: #b2dd45;
  --sd-on-accent: #0e1510;
  --sd-accent-soft: #22301a;
  --sd-signature: #95c11a;
  --sd-success: #7fd494;
  --sd-success-bg: #12301c;
  --sd-warning: #f2c14e;
  --sd-warning-bg: #3a2c07;
  --sd-danger: #ff9a94;
  --sd-danger-bg: #3f1214;
  --sd-info: #8cc2ff;
  --sd-info-bg: #11294a;
  --sd-danger-solid: #ff8a84;
  --sd-line: #2a382d;
  --sd-focus: #edf2ea;
  --sd-on-danger-solid: #0e1510;
  --sd-overlay: rgba(0, 0, 0, .65);
  --sd-hover: rgba(156, 203, 42, .10);
  --sd-shadow-color: 0 0% 0%;
  --sd-surface-raised: #1b2620;
  --sd-edge: rgba(255, 255, 255, .06);
  --sd-perf: #7f8f82;
  --sd-paper-dot: rgba(237, 242, 234, .05);
  color-scheme: dark;
}

/* ---------- Erhoehter Kontrast (Systemeinstellung) ---------- */
@media (prefers-contrast: more) {
  :root:root:root { --sd-ink-muted: var(--sd-ink); --sd-border-strong: var(--sd-ink); --sd-line: var(--sd-ink-muted); --sd-border-w: 3px; --sd-paper-dot: transparent; }
}