/* ==========================================================================
   Clu: Swiss Security AG  ·  Designtoken
   Schwarz als Grund, Chrom als Material, Schweizer Rot als Signal.
   ========================================================================== */

:root {
  /* Flächen */
  --ink-900: #06070A;
  --ink-850: #08090D;
  --ink-800: #0B0D12;
  --ink-700: #11141B;
  --ink-600: #191E27;
  --ink-500: #232935;

  /* Linien */
  --line: rgba(255, 255, 255, .08);
  --line-soft: rgba(255, 255, 255, .05);
  --line-strong: rgba(255, 255, 255, .14);
  --line-red: rgba(225, 27, 34, .28);

  /* Signal */
  --red-400: #F53A41;
  --red-500: #E11B22;
  --red-600: #B8151B;
  --red-700: #7E0F13;
  --red-glow: rgba(225, 27, 34, .30);
  --red-wash: rgba(225, 27, 34, .08);
  --red-grad: linear-gradient(180deg, #F02A31 0%, #C0161D 100%);

  /* Chrom */
  --chrome-050: #FFFFFF;
  --chrome-100: #F4F6F9;
  --chrome-200: #DFE4EB;
  --chrome-400: #A8AFBA;
  --chrome-600: #6E7784;
  --chrome-700: #4E5661;
  --chrome-grad: linear-gradient(135deg, #FFFFFF 0%, #DDE3EA 18%, #98A1AD 44%, #F2F5F9 56%, #79828F 78%, #D6DCE4 100%);

  /* Schrift */
  --text: #EEF1F5;
  --text-dim: #9AA3B0;
  --text-mute: #6B7480;

  /* Ampel */
  --amp-green: #35B37E;
  --amp-amber: #D9A32B;
  --amp-red: #E11B22;

  /* Typografie */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-eyebrow: .6875rem;
  --fs-body: 1.0125rem;
  --fs-lead: clamp(1.0625rem, .95rem + .5vw, 1.25rem);
  --fs-h3: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem);
  --fs-h1: clamp(2.375rem, 1.5rem + 3.9vw, 5rem);

  --tracking-eyebrow: .22em;
  --tracking-tight: -.022em;
  --tracking-tighter: -.035em;

  /* Raster, angelehnt an das 8pt-System des Clu: Tresor */
  --gap-1: .5rem;
  --gap-2: 1rem;
  --gap-3: 1.5rem;
  --gap-4: 2rem;
  --gap-5: 3rem;
  --gap-6: 4rem;
  --gap-7: 6rem;

  --maxw: 76rem;
  --maxw-narrow: 44rem;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 7vw, 7.5rem);
  --nav-h: 4.75rem;

  --radius: 4px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Bewegung */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .18s;
  --dur: .34s;
  --dur-slow: .7s;

  /* Höhen */
  --z-scene: 0;
  --z-content: 2;
  --z-menu: 950;
  --z-nav: 960;   /* ueber dem Menue, damit Wappen und Schliessknopf sichtbar bleiben */
  --z-veil: 1000;

  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 48px -24px rgba(0,0,0,.9);
  --shadow-red: 0 6px 28px -8px var(--red-glow);
}