/* Farben, Schrift, Maße. Namen wie im c1:Cockpit (wwwroot/css/tokens/), damit beides zusammenpasst.
   Die drei Rosé-Töne stammen vom Kopf der alten Seite und der Cockpit-Anmeldeseite. */
:root {
  --brand-red: #E4032E;
  --brand-red-hover: #C50328;
  --brand-red-soft: #FCE6EA;
  --brand-black: #1D1D1B;

  --ink-1: #201F35;
  --ink-2: #4D4D4D;
  --ink-muted: #8A8A93;
  --ink-on-brand: #FFFFFF;
  --ink-on-dark: #C9CBCE;

  --surface-page: #FFFFFF;
  --surface-app: #F4F5F7;
  --surface-card: #FFFFFF;
  --border-1: #E3E4E8;
  --border-2: #D2D3D9;

  /* Graphit-Kopf, Töne der Cockpit-Anmeldeseite (--surface-sidebar dort) */
  --graphite: #232629;
  --on-graphite-muted: #B7BBC0;
  --on-graphite-soft: #D9DBDE;

  --font-display: "Saira Condensed", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Segoe UI", "Open Sans", system-ui, -apple-system, sans-serif;

  --text-base: 17px;
  --leading: 1.55;
  --measure: 68ch;

  --container: 1200px;
  --gutter: 24px;

  --radius-btn: 10px;
  --radius-card: 14px;
  --control-h: 48px;

  --shadow-tile: 0 1px 2px rgba(32, 31, 53, .05), 0 4px 12px rgba(32, 31, 53, .06);
  --shadow-pop: 0 8px 32px rgba(32, 31, 53, .18);
  --ease-out: cubic-bezier(.2, .7, .3, 1);
}

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