/*
 * Design-Tokens – die einzige Stelle für Farben, Schriften, Abstände und Radien.
 * Das Design lässt sich hier ändern, ohne die übrige Oberfläche anzufassen.
 * Die Werte orientieren sich vorerst an Apple Erinnerungen (iOS).
 */

:root {
  /* --- Farben: hell – durchgehend Blautöne statt Grau --- */
  --color-bg: #edf3fc;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-pressed: #dce8f8;
  --color-text: #0a1a33;
  --color-text-secondary: #5a7295;
  --color-text-tertiary: #a8bbd6;
  --color-separator: rgba(20, 70, 150, 0.14);
  --color-accent: #007aff;           /* Hauptfarbe (iOS-Blau) */
  --color-accent-strong: #0060d6;
  --color-accent-contrast: #ffffff;  /* Text/Symbol auf Akzentfarbe */
  --color-accent-soft: rgba(0, 122, 255, 0.11);
  --color-accent-softer: rgba(0, 122, 255, 0.06);
  --color-secondary: #0b7f86;        /* Petrol – hebt Wichtiges hervor (Mengen, Vorschläge, Hinweise) */
  --color-secondary-soft: rgba(11, 127, 134, 0.12);
  --color-secondary-contrast: #ffffff;
  --color-price: #b86e00;            /* Amber – alles rund um Preise, Angebote, Ersparnis, Einkaufs-Tipp */
  --color-price-soft: rgba(245, 158, 11, 0.16);
  --color-price-contrast: #ffffff;
  --color-price-fill: #f59e0b;
  --color-danger: #ff3b30;           /* nur für Löschen */
  --color-warning: #ff9500;
  --color-positive: #007aff;
  --color-negative: #ff3b30;
  --color-overlay: rgba(6, 22, 48, 0.38);
  --color-checkbox: #9db4d6;
  --color-glass: rgba(240, 246, 255, 0.82);
  /* Lebendiger Hintergrund: weiche Farbflächen in Blau und Petrol */
  --bg-base: #e9f1fd;
  --bg-glow-1: rgba(0, 122, 255, 0.36);
  --bg-glow-2: rgba(11, 160, 160, 0.32);
  --bg-glow-3: rgba(110, 140, 255, 0.3);
  --surface-alpha: rgba(255, 255, 255, 0.86);

  /* --- Schrift --- */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --font-size-largetitle: 34px;
  --font-size-title: 20px;
  --font-size-headline: 17px;
  --font-size-body: 17px;
  --font-size-subhead: 15px;
  --font-size-section: 20px;
  --font-size-footnote: 13px;
  --font-size-caption: 12px;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Abstände --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* --- Radien --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* --- Größen --- */
  --size-row: 44px;
  --size-checkbox: 22px;
  --size-button: 40px;
  --size-topbar: 44px;
  --size-input: 40px;
  --size-fab: 44px;
  --size-control: 44px;
  --size-thumb: 76px;
  --content-max-width: 640px;

  /* --- Bewegung & Schatten --- */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --shadow-raised: 0 4px 16px rgba(10, 40, 90, 0.14);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #050a14;
    --color-surface: #0f1a2d;
    --color-surface-raised: #15233b;
    --color-surface-pressed: #1d2f4f;
    --color-text: #eaf2ff;
    --color-text-secondary: #8aa3c7;
    --color-text-tertiary: #46608a;
    --color-separator: rgba(110, 160, 240, 0.18);
    --color-accent: #2f8cff;
    --color-accent-strong: #5aa4ff;
    --color-accent-contrast: #ffffff;
    --color-accent-soft: rgba(47, 140, 255, 0.2);
    --color-accent-softer: rgba(47, 140, 255, 0.1);
    --color-secondary: #33c2bd;
    --color-secondary-soft: rgba(51, 194, 189, 0.16);
    --color-secondary-contrast: #04211f;
    --color-price: #fbbf4a;
    --color-price-soft: rgba(251, 191, 74, 0.16);
    --color-price-contrast: #2a1700;
    --color-price-fill: #f5a524;
    --color-danger: #ff453a;
    --color-warning: #ff9f0a;
    --color-positive: #2f8cff;
    --color-negative: #ff453a;
    --color-overlay: rgba(0, 4, 12, 0.6);
    --color-checkbox: #4d6a96;
    --color-glass: rgba(15, 26, 45, 0.82);
    --bg-base: #040913;
    --bg-glow-1: rgba(30, 110, 255, 0.34);
    --bg-glow-2: rgba(20, 170, 165, 0.26);
    --bg-glow-3: rgba(90, 80, 255, 0.24);
    --surface-alpha: rgba(16, 28, 50, 0.78);
    --shadow-raised: 0 4px 16px rgba(0, 6, 20, 0.55);
  }
}


/* Weitere Maße für Symbole und Kleinteile */
:root {
  --size-icon: 22px;
  --size-icon-sm: 16px;
  --size-mini-btn: 30px;
  --size-topbar-group: 40px;
  --size-dot: 8px;
  --size-switch-w: 51px;
  --size-switch-h: 31px;
  --border-hairline: 0.5px;
  --border-check: 1.5px;
}

/* Glas-Optik nach iOS "Liquid Glass" (Tab-Leiste, Eingabe) */
:root {
  --glass-bg: rgba(246, 250, 255, 0.55);
  --glass-rim: rgba(255, 255, 255, 0.85);          /* heller Glanzrand */
  --glass-rim-inner: rgba(255, 255, 255, 0.55);
  --glass-edge: rgba(20, 70, 150, 0.08);               /* feine Außenkante */
  --glass-shadow: 0 10px 30px rgba(10, 50, 120, 0.14), 0 1px 2px rgba(10, 50, 120, 0.08);
  --glass-blur: 10px;
  --glass-saturate: 190%;
  --glass-brightness: 1.08;
  --glass-pill: rgba(11, 127, 134, 0.14);         /* Kapsel hinter dem aktiven Tab */
  --glass-pill-rim: rgba(255, 255, 255, 0.6);
  --glass-lens: rgba(11, 160, 160, 0.22);          /* "Lupe" während des Wechsels */
  --tab-active-bg: rgba(0, 122, 255, 0.08);
  --size-tabbar: 62px;
  --size-tab-icon: 25px;
  --font-size-tab: 11px;
  --dock-space: 96px;          /* Platz unter dem Inhalt für die Tab-Leiste */
  --ease-spring: cubic-bezier(0.32, 1.35, 0.45, 1);
  --duration-tab: 420ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg: rgba(16, 30, 54, 0.55);
    --glass-rim: rgba(150, 195, 255, 0.24);
    --glass-rim-inner: rgba(150, 195, 255, 0.12);
    --glass-edge: rgba(0, 6, 20, 0.5);
    --glass-shadow: 0 10px 30px rgba(0, 6, 20, 0.6), 0 1px 2px rgba(0, 6, 20, 0.45);
    --glass-brightness: 1;
    --glass-pill: rgba(51, 194, 189, 0.2);
    --glass-pill-rim: rgba(140, 235, 230, 0.28);
    --glass-lens: rgba(80, 210, 205, 0.24);
    --tab-active-bg: rgba(47, 140, 255, 0.14);
  }
}