/*
 * Design-Tokens (5.2): Farben hell und dunkel, Schrift, Abstände, Radien, Schatten, Bewegung, Ebenen.
 *
 * Komponenten verwenden nur diese Tokens, nie feste Farbwerte.
 * Theme (5.2.7): :root enthält die hellen Werte. Die dunklen Werte stehen zweimal mit identischem
 * Inhalt: unter prefers-color-scheme: dark (ohne data-theme="light") und unter data-theme="dark".
 * Das Prüfskript und tests/unit/DesignSystemTest.php vergleichen beide Blöcke auf Gleichheit.
 * Kein light-dark(), kein CSS-Nesting, kein @layer (5.1).
 */

:root {
  color-scheme: light;

  /* Farben hell: „Beton bei Tag“ (5.2.1) */
  --c-bg: #F3F4F6;
  --c-surface: #FFFFFF;
  --c-surface-2: #EEF0F3;
  --c-surface-3: #E3E6EA;
  --c-border: #D5D9DE;
  --c-border-strong: #767E88;
  --c-text: #15181C;
  --c-text-muted: #545C66;
  --c-text-placeholder: #6B737D;
  --c-text-disabled: #8A929C;
  --c-accent: #FF7A1A;
  --c-accent-hover: #F06A0A;
  --c-accent-pressed: #DB5A00;
  --c-on-accent: #15181C;
  --c-accent-text: #B23C07;
  --c-accent-soft: #FFEADA;
  --c-focus: #B23C07;
  --c-success: #1B7045;
  --c-success-soft: #E3F4EA;
  --c-warning: #8A5A00;
  --c-warning-soft: #FFF4D6;
  --c-danger: #C62828;
  --c-danger-soft: #FDECEC;
  --c-on-danger: #FFFFFF;
  --c-info: #1F5FBF;
  --c-friends: #0B6E74;
  --c-friends-soft: #E2EFF0;
  --c-overlay: rgba(21, 24, 28, .48);

  /* Ergänzung: Rand von Karten (hell Schatten statt Rand, dunkel Rand statt Schatten, 5.3.2) */
  --c-card-border: transparent;

  /* Marke (unabhängig vom Theme): orange Kurve auf Asphalt, wie das App-Icon tools/icons/icon.svg (5.2.5) */
  --c-brand: #FF7A1A;
  --c-brand-ground: #23272C;

  /* Karten-Tokens (unabhängig vom Theme, 5.2.1): Kacheln sind immer hell */
  --map-pin-public: #FF7A1A;
  --map-pin-friends: #0B6E74;
  --map-pin-ring: #15181C;
  --map-cluster: #15181C;
  --map-cluster-friends: #0B6E74;
  --map-location: #1F5FBF;
  --map-radius: #15181C;
  --map-focus-ring: #15181C;
  --map-focus-halo: #FFFFFF;

  /* Schrift (5.2.3) */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Barlow Semi Condensed", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  --lh-xs: 1.35;
  --lh-s: 1.4;
  --lh-m: 1.5;
  --lh-l: 1.45;
  --lh-xl: 1.2;
  --lh-2xl: 1.15;
  --lh-3xl: 1.1;

  /* Abstände, 4-px-Raster (5.2.4) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Seitenrand: Handy 16 px, Tablet 24 px, Desktop 32 px (Umschaltung unten) */
  --page-gutter: 16px;

  /* Maße für Bedienelemente (5.3.2, 5.12) */
  --tap-min: 44px;
  --control-h: 48px;
  --control-h-mouse: 40px;
  --chip-h: 36px;
  --icon-size: 1.5rem;
  --read-width: 720px;
  --content-width: 960px;
  --dialog-width: 560px;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Radien: kantig mit leichten Rundungen */
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Schatten hell */
  --shadow-1: 0 1px 2px rgba(16, 19, 23, .08);
  --shadow-2: 0 4px 12px rgba(16, 19, 23, .12);
  --shadow-3: 0 12px 32px rgba(16, 19, 23, .18);

  /* Bewegung (bei reduzierter Bewegung 0,01 ms, siehe base.css) */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* Ebenen (z-index); modale Dialoge liegen im Top-Layer */
  --z-sticky: 10;
  --z-map-ui: 20;
  --z-header: 30;
  --z-nav: 30;
  --z-sheet: 40;
  --z-menu: 50;
  --z-toast: 60;
  --z-skip: 70;
}

@media (min-width: 600px) {
  :root {
    --page-gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-gutter: 32px;
  }
}

/* Farben dunkel: „Asphalt bei Nacht“ – Block 1 von 2 (muss mit Block 2 identisch sein) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #111315;
    --c-surface: #1A1D21;
    --c-surface-2: #23272C;
    --c-surface-3: #2D3238;
    --c-border: #3A4047;
    --c-border-strong: #6B737D;
    --c-text: #ECEEF1;
    --c-text-muted: #A3ABB5;
    --c-text-placeholder: #848C96;
    --c-text-disabled: #6B737D;
    --c-accent: #FF7A1A;
    --c-accent-hover: #FF8A33;
    --c-accent-pressed: #F06A0A;
    --c-on-accent: #111315;
    --c-accent-text: #FF9A52;
    --c-accent-soft: #432E20;
    --c-focus: #FF9A52;
    --c-success: #4CC38A;
    --c-success-soft: #1C3428;
    --c-warning: #F5C542;
    --c-warning-soft: #3A3218;
    --c-danger: #FF6B6B;
    --c-danger-soft: #3A1F22;
    --c-on-danger: #111315;
    --c-info: #6AB0FF;
    --c-friends: #3CC7CF;
    --c-friends-soft: #1F383D;
    --c-overlay: rgba(0, 0, 0, .60);
    --c-card-border: #3A4047;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .50);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .60);
  }
}

/* Farben dunkel – Block 2 von 2 (manuelle Wahl, identisch mit Block 1) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #111315;
  --c-surface: #1A1D21;
  --c-surface-2: #23272C;
  --c-surface-3: #2D3238;
  --c-border: #3A4047;
  --c-border-strong: #6B737D;
  --c-text: #ECEEF1;
  --c-text-muted: #A3ABB5;
  --c-text-placeholder: #848C96;
  --c-text-disabled: #6B737D;
  --c-accent: #FF7A1A;
  --c-accent-hover: #FF8A33;
  --c-accent-pressed: #F06A0A;
  --c-on-accent: #111315;
  --c-accent-text: #FF9A52;
  --c-accent-soft: #432E20;
  --c-focus: #FF9A52;
  --c-success: #4CC38A;
  --c-success-soft: #1C3428;
  --c-warning: #F5C542;
  --c-warning-soft: #3A3218;
  --c-danger: #FF6B6B;
  --c-danger-soft: #3A1F22;
  --c-on-danger: #111315;
  --c-info: #6AB0FF;
  --c-friends: #3CC7CF;
  --c-friends-soft: #1F383D;
  --c-overlay: rgba(0, 0, 0, .60);
  --c-card-border: #3A4047;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, .50);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .60);
}

/* Manuell hell gewählt: Browser-Steuerelemente ebenfalls hell */
:root[data-theme="light"] {
  color-scheme: light;
}

/*
 * Mehr Kontrast (5.12): Metatext wie Fließtext, Trennlinien kräftig, Fokusring 3 px.
 * Gesetzt am <body>, damit es in beiden Themes über den :root-Werten liegt.
 */
@media (prefers-contrast: more) {
  body {
    --c-text-muted: var(--c-text);
    --c-border: var(--c-border-strong);
    --focus-width: 3px;
  }
}