/* ==========================================================================
   Design-Tokens — Idhu Enna? Round Timer
   Quelle: design/Sand Dice.dc.html, <script type="text/x-dc"> am Dateiende.
   Jeder Wert hier ist uebernommen, nicht geschaetzt. Die Kommentare nennen
   die Stelle im Export, an der der Wert steht.
   ========================================================================== */

:root {
  /* --- Marke ------------------------------------------------------------
     Zeile 139: const PINK, YELLOW, TEAL, INK, PAPER                      */
  --pink:   #DE5B95;   /* Unterbrechung: Buzz, letzte 5 Sekunden, Aussetzen */
  --yellow: #F2D45E;   /* Team 2 */
  --teal:   #63C4C6;   /* Team 1 */
  --ink:    #1D1B2E;   /* Bedienelemente und Icons */
  --paper:  #FDF8EE;   /* Schrift auf dunklem Grund */

  /* --- Gruende (renderVals → ground) ----------------------------------- */
  --ground-normal: #FFFFFF;
  --ground-alarm:  #FCE7EF;
  --ground-over:   #F1EDE6;
  --wash-skip:     rgba(222, 91, 149, 0.18);

  /* --- Ink-Alpha-Stufen -------------------------------------------------
     Alle Graustufen im Export sind rgba(29,27,46,x), nie echtes Grau.    */
  --ink-12: rgba(29, 27, 46, 0.12);
  --ink-18: rgba(29, 27, 46, 0.18);
  --ink-20: rgba(29, 27, 46, 0.20);
  --ink-25: rgba(29, 27, 46, 0.25);
  --ink-28: rgba(29, 27, 46, 0.28);
  --ink-35: rgba(29, 27, 46, 0.35);
  --ink-40: rgba(29, 27, 46, 0.40);
  --ink-45: rgba(29, 27, 46, 0.45);
  --ink-50: rgba(29, 27, 46, 0.50);
  --ink-55: rgba(29, 27, 46, 0.55);
  --ink-65: rgba(29, 27, 46, 0.65);
  --ink-80: rgba(29, 27, 46, 0.80);
  --paper-40: rgba(253, 248, 238, 0.40);   /* heroInk im Zustand "over" */
  --tint-team1: rgba(99, 196, 198, 0.30);  /* name1Bg beim Umbenennen */
  --tint-team2: rgba(242, 212, 94, 0.35);  /* name2Bg beim Umbenennen */

  /* --- Skalierung -------------------------------------------------------
     Der Export ist auf 402 x 874 gezeichnet. --u ist eine Design-Einheit:
     1 Design-Pixel. Alles Feste skaliert damit mit der Breite; der Kreis
     nimmt sich die Resthoehe (siehe app.css). Der Hoehenterm schuetzt
     kurze Displays, der Deckel verhindert Riesendarstellung auf Tablets. */
  --u: min(calc(100vw / 402), calc(100dvh / 707), 1.12px);

  /* --- Schrift ---------------------------------------------------------- */
  --font-display: 'Archivo Black', system-ui, -apple-system, sans-serif;
  --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Uhr: clockSize — alarm 132, vor der Runde 78, sonst 104; ls -4px */
  --clock-pre:   calc(78 * var(--u));
  --clock-run:   calc(104 * var(--u));
  --clock-alarm: calc(132 * var(--u));
  --clock-track: calc(-4 * var(--u));

  /* Feste Schriftgroessen ausserhalb des Kreises */
  --fs-chip:   calc(12 * var(--u));   /* ls 1.2px */
  --fs-turn:   calc(13 * var(--u));   /* ls 1.8px */
  --fs-name:   calc(14 * var(--u));   /* ls 0.6px */
  --fs-score:  calc(44 * var(--u));   /* line-height .9 */
  --fs-minus:  calc(20 * var(--u));
  --fs-plus:   calc(34 * var(--u));
  --fs-primary:calc(17 * var(--u));   /* ls 1.4px */
  --fs-next:   calc(14 * var(--u));   /* ls 1px */
  --fs-new:    calc(10 * var(--u));   /* ls 0.4px */
  --fs-reroll: calc(14 * var(--u));   /* ls 1px */

  /* --- Masse ------------------------------------------------------------ */
  --hero:        calc(236 * var(--u));  /* Kreis, Zeile 53 */
  --hero-border: calc(5 * var(--u));
  --ctl:         calc(48 * var(--u));   /* Header-Buttons und Minus */
  --plus-w:      calc(68 * var(--u));
  --plus-h:      calc(56 * var(--u));
  --pill-w:      calc(12 * var(--u));
  --pill-h:      calc(34 * var(--u));
  --btn-h:       calc(60 * var(--u));
  --next-w:      calc(128 * var(--u));
  --reroll-h:    calc(52 * var(--u));
  --icon-22:     calc(22 * var(--u));
  --edge-h:      calc(3 * var(--u));    /* Sandkante; Export: 6px deckend */

  /* --- Abstaende (padding 58 22 40, Zeile 27) --------------------------- */
  --pad-x:      calc(22 * var(--u));
  --pad-top:    calc(58 * var(--u));
  --pad-bottom: calc(40 * var(--u));
  --gap-bar:    calc(8 * var(--u));
  --gap-utils:  calc(6 * var(--u));
  --gap-chip:   calc(10 * var(--u));
  --gap-row:    calc(9 * var(--u));
  --gap-stage:  calc(12 * var(--u));
  --gap-ctl:    calc(10 * var(--u));
  --mt-turn:    calc(20 * var(--u));
  --mt-clock:   calc(8 * var(--u));
  --mt-ctl:     calc(14 * var(--u));

  /* --- Radien ----------------------------------------------------------- */
  --r-name:  calc(6 * var(--u));
  --r-minus: calc(14 * var(--u));
  --r-btn:   calc(18 * var(--u));
  --r-pill:  9999px;

  /* --- Rahmen ----------------------------------------------------------- */
  --bw-2: calc(2 * var(--u));
  --bw-3: calc(3 * var(--u));

  /* --- Schatten (heroShadow) -------------------------------------------- */
  --shadow-hero:  0 calc(9 * var(--u)) 0 var(--ink);
  --shadow-alarm: 0 0 0 calc(14 * var(--u)) var(--ink-18);

  /* --- Bewegung ---------------------------------------------------------
     diceCycle 0.36s steps(1,end), Versatz 0 / .12 / .24 (Zeilen 15-18)   */
  --cycle: 0.36s;

  /* Laufzeitwerte, von js/app.js gesetzt */
  --fill-h: 100%;
  --team: var(--teal);
}

@media (prefers-reduced-motion: reduce) {
  :root { --cycle: 0.72s; }
}