/* Tenacis — tokens de marca. Tema claro por padrão; escuro via [data-theme="dark"] ou preferência do sistema. */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap");

:root {
  --tn-font-heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --tn-font-body: "Barlow", Arial, sans-serif;
  --tn-wordmark-weight: 600;
  --tn-wordmark-tracking: 0.12em;

  --tn-bg: #f2f2f3;
  --tn-surface: #ffffff;
  --tn-text: #1d1f20;
  --tn-text-2: #555a5e;
  --tn-accent: #5980a6;        /* ícones, marcas de canto, texto grande */
  --tn-accent-text: #416180;   /* acento em texto corrido */
  --tn-accent-strong: #2c455d;
  --tn-line: #d6dbe0;
  --tn-on-accent: #ffffff;
  --tn-symbol-clamp: #2c455d;
  --tn-symbol-core: #5980a6;

  --tn-corner-size: 12px;
  --tn-corner-weight: 2px;
  color-scheme: light;
}

[data-theme="dark"] {
  --tn-bg: #111518;
  --tn-surface: #1a2026;
  --tn-text: #e4e7ea;
  --tn-text-2: #9aa6b1;
  --tn-accent: #7fa3c7;
  --tn-accent-text: #a9c3dc;
  --tn-accent-strong: #a9c3dc;
  --tn-line: #2a333b;
  --tn-on-accent: #111518;
  --tn-symbol-clamp: #e4e7ea;
  --tn-symbol-core: #7fa3c7;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tn-bg: #111518;
    --tn-surface: #1a2026;
    --tn-text: #e4e7ea;
    --tn-text-2: #9aa6b1;
    --tn-accent: #7fa3c7;
    --tn-accent-text: #a9c3dc;
    --tn-accent-strong: #a9c3dc;
    --tn-line: #2a333b;
    --tn-on-accent: #111518;
    --tn-symbol-clamp: #e4e7ea;
    --tn-symbol-core: #7fa3c7;
    color-scheme: dark;
  }
}

/* Moldura de quatro cantos — o motivo da marca.
   Uso: <div class="tn-frame"><span class="tn-c tl"></span><span class="tn-c tr"></span><span class="tn-c bl"></span><span class="tn-c br"></span>…</div> */
.tn-frame { position: relative; border: 1px solid var(--tn-line); }
.tn-c { position: absolute; width: var(--tn-corner-size); height: var(--tn-corner-size); border: 0 solid var(--tn-accent); pointer-events: none; }
.tn-c.tl { top: -1px; left: -1px; border-top-width: var(--tn-corner-weight); border-left-width: var(--tn-corner-weight); }
.tn-c.tr { top: -1px; right: -1px; border-top-width: var(--tn-corner-weight); border-right-width: var(--tn-corner-weight); }
.tn-c.bl { bottom: -1px; left: -1px; border-bottom-width: var(--tn-corner-weight); border-left-width: var(--tn-corner-weight); }
.tn-c.br { bottom: -1px; right: -1px; border-bottom-width: var(--tn-corner-weight); border-right-width: var(--tn-corner-weight); }

/* Símbolo inline que segue o tema: <svg class="tn-symbol" viewBox="0 0 16 16"><path class="clamp" d="M1 1h9v3H4v6H1zM15 15H6v-3h6V6h3z"/><path class="core" d="M6 6h4v4H6z"/></svg> */
.tn-symbol .clamp { fill: var(--tn-symbol-clamp); }
.tn-symbol .core { fill: var(--tn-symbol-core); }

/* Troca de arquivo por tema */
.only-dark { display: none; }
[data-theme="dark"] .only-light { display: none; }
[data-theme="dark"] .only-dark { display: revert; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none; }
  :root:not([data-theme="light"]) .only-dark { display: revert; }
}