/* maarcade — Design Tokens
   Markenwerte 1:1 aus der App. Eine Akzentfarbe (Orange).
   Cyan/Grün nur semantisch, nahezu monochrome Basis. */

:root {
  /* ---- Flächen ---- */
  --bg:        #0D0D0D;  /* Seite */
  --bg-elev:   #1A1A1A;  /* Karten, Panels */
  --bg-deep:   #0A0A0A;  /* Terminal-Body, tiefste Ebene */
  --line:      #2A2A2A;  /* Trennlinien */
  --line-2:    #3A3A3A;  /* hervorgehobene Kante */

  /* ---- Text ---- */
  --text:      #E8E8E8;
  --text-dim:  #888888;

  /* ---- Akzent (Orange = Primär) ---- */
  --orange:        #FF6600;
  --orange-bright: #FF9500;
  --orange-3:   rgba(255, 102, 0, 0.03); /* Grid-Textur */
  --orange-8:   rgba(255, 102, 0, 0.08); /* Logo-Füllung */
  --orange-25:  rgba(255, 102, 0, 0.25); /* Logo-Ring */
  --orange-glow: rgba(255, 102, 0, 0.28);

  /* ---- Semantisch (homöopathisch) ---- */
  --cyan:   #00D4FF;  /* max. 1–2 Akzente */
  --green:  #00FF41;  /* nur „ok / sicher" */

  /* ---- Typografie ---- */
  --font-mono: "NotoSansMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "NotoSans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Modulare Skala ~1.25 (Major Third), Basis 16px */
  --fs-50:  0.8rem;    /* 12.8 — Labels, Eyebrow */
  --fs-100: 1rem;      /* 16   — Basistext */
  --fs-200: 1.25rem;   /* 20 */
  --fs-300: 1.563rem;  /* 25 */
  --fs-400: 1.953rem;  /* 31 */
  --fs-500: 2.441rem;  /* 39 */
  --fs-600: 3.052rem;  /* 49 — Display */
  --fs-700: 3.815rem;  /* 61 — Hero Display */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-label:  0.08em;

  /* ---- Spacing (8px-Raster) ---- */
  --s-1:  0.25rem;  /*  4 */
  --s-2:  0.5rem;   /*  8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-5:  1.5rem;   /* 24 */
  --s-6:  2rem;     /* 32 */
  --s-7:  3rem;     /* 48 */
  --s-8:  4rem;     /* 64 */
  --s-9:  6rem;     /* 96 */
  --s-10: 8rem;     /* 128 */

  /* ---- Layout ---- */
  --maxw: 1140px;
  --grid-size: 28px;

  /* ---- Radius / Kante ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out */
  --dur:  170ms;
}