/*
  Zweck: Zentrale Farb-, Abstand- und Typografie-Tokens der LCARS-Konsole.
  Zielpfad: /home/mckiede/public_html/design/tokens.css
  Verantwortlich: mckie-Portal
*/

:root {
  --bg: #050608;
  --console-bg: #050608;
  --console-frame: #c97a16;
  --side-rail-frame: var(--red);
  --console-rail: #0b0f14;
  --surface-dark: #121722;
  --surface-deep: #0b0f14;
  --surface-accent: #171c28;
  --segment-muted: rgb(201 122 22 / 28%);
  --panel: #0b0f14;
  --panel-soft: #121722;
  --text: #e7c39a;
  --muted: #a7aebd;
  --black: #050608;
  --orange: #d88a1f;
  --peach: #e7c39a;
  --violet: #8d7ab8;
  --blue: #6f86c9;
  --blue-light: #7a92d9;
  --steel: #8f97a8;
  --red: #d66a6a;
  /* Status / hover accents (color-mix in components.css) — no .tone-green module swatch */
  --green: #9bd48b;
  --rgb-page: 5 6 8;
  --rgb-white: 255 255 255;
  --rgb-orange: 216 138 31;
  --rgb-orange-dark: 201 122 22;
  --rgb-blue: 111 134 201;
  --color-page-start: #020203;
  --wash-primary-12: rgb(var(--rgb-orange) / 12%);
  --wash-primary-16: rgb(var(--rgb-orange) / 16%);
  --wash-primary-18: rgb(var(--rgb-orange) / 18%);
  --wash-primary-20: rgb(var(--rgb-orange) / 20%);
  --wash-primary-22: rgb(var(--rgb-orange) / 22%);
  --wash-primary-24: rgb(var(--rgb-orange) / 24%);
  --wash-frame-34: rgb(var(--rgb-orange-dark) / 34%);
  --wash-blue-14: rgb(var(--rgb-blue) / 14%);
  --wash-white-5: rgb(var(--rgb-white) / 5%);
  --wash-white-6: rgb(var(--rgb-white) / 6%);
  --wash-white-8: rgb(var(--rgb-white) / 8%);
  --wash-white-9: rgb(var(--rgb-white) / 9%);
  --wash-white-12: rgb(var(--rgb-white) / 12%);
  --wash-white-16: rgb(var(--rgb-white) / 16%);
  --wash-black-18: rgb(var(--rgb-page) / 18%);
  --wash-black-22: rgb(var(--rgb-page) / 22%);
  --wash-black-45: rgb(var(--rgb-page) / 45%);
  --radius-xl: 1.55rem;
  --radius-lg: 1rem;
  --radius-md: 0.62rem;
  --radius-sm: 0.38rem;
  --radius-pill: 999px;
  --radius-control: var(--radius-md);
  --radius-frame: var(--radius-xl);
  --radius-cutout: var(--radius-lg);
  --gap: 0.5rem;
  --shadow: 0 1.5rem 4rem var(--wash-black-45);
  --segment-line: 0.16rem;
  --segment-line-thin: 0.1rem;
  --segment-line-strong: 0.32rem;
  --segment-rail: 0.45rem;
  --segment-rail-strong: 0.62rem;
  /* Segment-link SVG cap (viewBox 0 0 72 80); cut height = top bar on __body */
  --segment-cap-width: 4.5rem;
  --segment-cap-cut-h: 14px; /* = buildCapPath() cut (render.js), Top-Balken auf __body */
  --segment-body-pad-y: 0.6rem;
  --segment-body-pad-x: 0.8rem;
  --segment-guide-bar-h: 0.45rem;
  --segment-guide-short: 8rem;
  --segment-guide-medium: 18rem;
  --segment-opacity-soft: 0.58;
  --segment-opacity-strong: 0.9;
  --dock-offset-sm: 0.45rem;
  --dock-offset-lg: 1.4rem;
  --step-corner-sm: 0.55rem;
  --step-corner-lg: 1.8rem;
  /*
   * LCARS clip-path presets (reserved, not used in production CSS yet):
   * --step-cut-panel: polygon(0 0, calc(100% - 1.8rem) 0, 100% 1.8rem, 100% 100%, 1.05rem 100%, 0 calc(100% - 1.05rem));
   * --step-cut-control: polygon(0 0, calc(100% - 0.55rem) 0, 100% 0.55rem, 100% 100%, 0 100%);
   * --step-cut-left: polygon(1.05rem 0, 100% 0, 100% 100%, 0 100%, 0 1.05rem);
   */
  --console-seam: 0.35rem;
  --console-panel-inset: 0.65rem;
  /* Bracket rails sit inside inset box-shadow; pad past the rail for orange-frame parity */
  --console-bracket-inset: calc(var(--console-panel-inset) + var(--segment-rail-strong));
  /* Mobile/tablet red matrix: one gap for padding, row/col gutters, START↔MODULE */
  --console-matrix-gap: 0.35rem;
  --console-top-bar: 0.42rem;
  --module-top-line: 0.14rem;
  --panel-glass: var(--wash-white-5);
  /* Linke Rail (Start/Module + interne Ziele): eine Größe */
  --rail-button-min-height: 3.4rem;
  --rail-button-pad-y: 0.85rem;
  --rail-button-pad-x-end: 1rem;
  --rail-button-pad-x-start: 1.25rem;
  --side-rail-width: 12rem;
  --module-rail-width: 15rem;
  font-family: Arial, Helvetica, sans-serif;
  color-scheme: dark;
}

.tone-orange {
  --tone: var(--orange);
  background-color: var(--orange);
}

.tone-peach {
  --tone: var(--peach);
  background-color: var(--peach);
}

.tone-violet {
  --tone: var(--violet);
  background-color: var(--violet);
}

.tone-blue {
  --tone: var(--blue);
  background-color: var(--blue);
}

.tone-steel {
  --tone: var(--steel);
  background-color: var(--steel);
}

.tone-red {
  --tone: var(--red);
  background-color: var(--red);
}