/*!
 * TimeTales · world-swtor.css
 * SWTOR RP: Holo-Deck, Weltraumoper. Aktiv mit <html data-world="swtor">.
 * Nur Token-Überschreibungen und der Welt-Look gemeinsamer Bausteine. Seitenlayouts gehören
 * in page-<seite>.css.
 *
 * Schrift: Archivo breit (125%), Gewicht 700, Versalien, gesperrt. Die Schrift läuft sehr breit:
 * --display-scale nimmt die Größe zurück.
 * Zusatz-Token: --sith (#ff5a5f) ausschließlich für den Fraktionsvergleich Republik und Imperium.
 * Buttons haben gekappte Ecken über clip-path. clip-path schneidet auch Fokus-Umrisse ab,
 * deshalb liegt der Fokusring bei Buttons innen.
 */

html[data-world="swtor"] {
  /* Flächen: tiefes Blau */
  --ink-0: #04060d;
  --ink-1: #080b16;
  --ink-2: #0d1322;
  --ink-3: #151d33;

  /* Linien: Holo-Blau */
  --line: rgb(140 190 255 / .13);
  --line-strong: rgb(140 190 255 / .28);

  --text: #eaf1fb;
  --text-2: #a3b1c8;
  --text-3: #7787a3;

  --accent: #6fb8ff;
  --accent-ink: #03101f;
  --sith: #ff5a5f;

  /* Überschriften */
  --display-weight: 700;
  --display-stretch: 125%;
  --display-tracking: .06em;
  --display-leading: 1.02;
  --display-case: uppercase;
  --display-scale: .8;
  --display-cap: 9.5vw;
  --display-pad: 0em;

  --heading-weight: 700;
  --heading-stretch: 125%;
  --heading-tracking: .06em;
  --heading-leading: 1.14;

  --em-style: normal;

  --meta-family: var(--font-mono);
  --meta-weight: 500;
  --meta-size: .75rem;
  --meta-tracking: .1em;
  --meta-case: uppercase;

  --navlink-family: var(--font-display);
  --navlink-weight: 600;
  --navlink-size: .6875rem;
  --navlink-stretch: 125%;
  --navlink-tracking: .14em;
  --navlink-case: uppercase;

  --btn-family: var(--font-display);
  --btn-weight: 700;
  --btn-size: .75rem;
  --btn-stretch: 125%;
  --btn-tracking: .14em;
  --btn-case: uppercase;
}

/* Weltname in der Leiste */
html[data-world="swtor"] .tt-nav__world {
  font-size: .8125rem;
  letter-spacing: .12em;
}

/* Buttons: zwei gekappte Ecken (oben links, unten rechts) */
html[data-world="swtor"] .tt-btn:not(.tt-btn--text) {
  --cut: 10px;
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* Die Schrägen bekommen ihre Linie zurück, die clip-path dem Rahmen wegschneidet */
html[data-world="swtor"] .tt-btn:not(.tt-btn--text)::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--btn-border) calc(50% - 1px), var(--btn-border) calc(50% + 1px), transparent calc(50% + 1px)) left top / var(--cut) var(--cut),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--btn-border) calc(50% - 1px), var(--btn-border) calc(50% + 1px), transparent calc(50% + 1px)) right bottom / var(--cut) var(--cut);
  background-repeat: no-repeat;
}

html[data-world="swtor"] .tt-btn--ghost {
  --btn-border: color-mix(in srgb, var(--accent) 60%, transparent);
  --btn-bg: color-mix(in srgb, var(--accent) 7%, transparent);
  --btn-fill: var(--accent);
  --btn-fill-fg: var(--accent-ink);
}

html[data-world="swtor"] .tt-btn--sm {
  --cut: 8px;
  font-size: .6875rem;
}

html[data-world="swtor"] .tt-btn--lg {
  --cut: 12px;
  font-size: .8125rem;
}

html[data-world="swtor"] .tt-btn:not(.tt-btn--text):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -6px;
}

/* Leuchtende Haarlinien: laufen an den Enden aus, kein Schein nach außen */
html[data-world="swtor"] .tt-rule {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent) 22%, var(--line-strong) 60%, transparent);
}

html[data-world="swtor"] .tt-nav::before {
  border-bottom-color: transparent;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 30%, color-mix(in srgb, var(--accent) 55%, transparent) 70%, transparent) left bottom / 100% 1px no-repeat,
    color-mix(in srgb, var(--ink-0) 78%, transparent);
}

html[data-world="swtor"] .tt-footer {
  border-top-color: transparent;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 30%, var(--line-strong) 70%, transparent) left top / 100% 1px no-repeat,
    var(--ink-1);
}

html[data-world="swtor"] .tt-chip {
  letter-spacing: .1em;
}

@media (max-width: 899.98px) {
  html[data-world="swtor"].js .tt-nav__link {
    font-size: clamp(1.625rem, 8vw, 3rem);
    line-height: 1.2;
  }
}