/*
 * Design-Tokens – hier wird später die Sanom-CI eingesetzt (Farben, Schrift, Radien).
 * Alle Komponenten in app.css verwenden ausschliesslich diese Variablen.
 * Markenfarben aus dem Sanom-Logo: Petrol #235c69, Navy #1d384a, Salbei #779b7f.
 */
:root {
  /* Native Bedienelemente (Datum/Zeit-Symbole, Checkboxen, Scrollbalken) passend zum Farbschema */
  color-scheme: light dark;

  /* Marke */
  --brand: #235c69;
  --brand-strong: #1d384a;
  --brand-soft: #e5eff1;
  --sage: #4f7358;              /* Logo-Grün, abgedunkelt für Text/Symbole (≥ 4.5:1 auf Weiss und --sage-soft) */
  --sage-soft: #e9f1eb;
  --brand-contrast: #ffffff;
  --accent: #bb4f1b;            /* Stopp/laufender Timer (≥ 4.5:1 mit weisser Schrift) */
  --accent-soft: #fdf1eb;
  --accent-contrast: #ffffff;   /* Schrift auf --accent */
  --accent-strong: #a3441a;     /* Schrift auf --accent-soft (Timer-Anzeige, ≥ 4.5:1) */

  /* Flächen & Text */
  --bg: #f4f6f7;
  --surface: #ffffff;
  --surface-2: #f0f3f5;
  --surface-3: #e6ebee;
  --surface-sunken: #f0f3f5;    /* vertiefte Fläche, auf der Karten liegen (z.B. Kanban-Spalte) – im Dunkelmodus dunkler als --surface */
  --border: #dde3e7;
  --border-strong: #c5cfd5;
  --text: #17222a;
  --text-muted: #5c6b75;
  --text-faint: #64717a;        /* ≥ 4.5:1 auf --surface und --bg */

  /* Status */
  --success: #23794f;
  --success-soft: #e2f3ea;
  --success-contrast: #ffffff;  /* Schrift auf --success (Toast) */
  --warning: #8a5d00;
  --warning-soft: #fbf1dc;
  --danger: #b4322a;
  --danger-soft: #fbe7e5;
  --danger-contrast: #ffffff;   /* Schrift auf --danger (Löschen-Button, Fehler-Toast) */
  --info: #2a5f9e;
  --info-soft: #e5eef9;

  /* Projektfarben-Punkte (im Dunkelmodus aufgehellt, damit dunkle Farben sichtbar bleiben) */
  --dot-filter: none;

  /* Typografie */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-xxl: 28px;

  /* Form */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 32, 40, .06);
  --shadow: 0 2px 8px rgba(16, 32, 40, .08), 0 1px 2px rgba(16, 32, 40, .06);
  --shadow-lg: 0 12px 32px rgba(16, 32, 40, .18);
  --focus: 0 0 0 3px rgba(35, 92, 105, .28);

  /* Layout */
  --sidebar-w: 240px;
  --tabbar-h: 62px;
  --topbar-h: 56px;
  --content-max: 1080px;
  --tap: 44px;                  /* Mindestgrösse Touch-Ziel */
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #6fa6ba;
    --brand-strong: #8cc0d3;
    --brand-soft: #1d3540;
    --brand-contrast: #0c1a20;
    --sage: #9cc0a4;
    --sage-soft: #1c2e24;
    --accent: #f0814f;
    --accent-soft: #3a2218;
    --accent-contrast: #1a0d06;   /* dunkle Schrift auf hellem Orange (7:1 statt 2.6:1 mit Weiss) */
    --accent-strong: #f59a72;

    --bg: #0f1518;
    --surface: #172024;
    --surface-2: #1d282d;
    --surface-3: #243238;
    --surface-sunken: #121a1d;
    --border: #2a383f;
    --border-strong: #3a4b53;
    --text: #e7edf0;
    --text-muted: #a2b1b9;
    --text-faint: #8394a0;

    --success: #5cc092;
    --success-soft: #16302a;
    --success-contrast: #08140f;
    --warning: #e3b154;
    --warning-soft: #33290f;
    --danger: #f07b72;
    --danger-soft: #3a1a18;
    --danger-contrast: #1f0b09;
    --info: #7fb0ea;
    --info-soft: #182a40;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 8px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);
    --focus: 0 0 0 3px rgba(111, 166, 186, .35);
    --dot-filter: brightness(1.45);
  }
}