/* ScienceLayers — design tokens */

:root {
  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Paper / ink (light mode) */
  --paper:        #FAF7F0;
  --paper-2:      #F2EEE3;        /* card / inset surface */
  --paper-3:      #E9E2D2;        /* hairline / divider */
  --rule:         #1A1814;        /* hairline rule on paper, near-black */
  --rule-soft:    rgba(26, 24, 20, 0.18);
  --ink:          #1A1814;        /* primary text */
  --ink-2:        #3D362B;        /* secondary text */
  --ink-3:        #6E6452;        /* metadata, captions */
  --ink-4:        #9D9281;        /* muted, placeholder */
  --highlight:    #F4E9C8;        /* paper highlight wash */

  /* Semantic — process / consolidated / pending / exclusion / type
     All chroma 0.10–0.13 for cohesion */
  --c-blue:       oklch(0.50 0.13 245);   /* processo */
  --c-blue-bg:    oklch(0.94 0.04 245);
  --c-green:      oklch(0.46 0.11 155);   /* evidência consolidada */
  --c-green-bg:   oklch(0.93 0.05 155);
  --c-amber:      oklch(0.62 0.13 70);    /* pendente/incerto */
  --c-amber-bg:   oklch(0.94 0.06 78);
  --c-red:        oklch(0.50 0.16 25);    /* exclusão/atenção */
  --c-red-bg:     oklch(0.94 0.04 25);
  --c-violet:     oklch(0.46 0.13 295);   /* tipo de revisão */
  --c-violet-bg:  oklch(0.94 0.04 295);

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Type scale (editorial) */
  --t-mono-xs: 11px;
  --t-mono-sm: 12px;
  --t-mono:    13px;
  --t-ui-xs:   12px;
  --t-ui-sm:   13px;
  --t-ui:      14px;
  --t-ui-lg:   15px;
  --t-body-sm: 16px;
  --t-body:    18px;
  --t-body-lg: 20px;
  --t-h6: 18px;
  --t-h5: 22px;
  --t-h4: 28px;
  --t-h3: 36px;
  --t-h2: 52px;
  --t-h1: 72px;
  --t-display: 112px;

  /* Density (overridable by tweak) */
  --density: 1;
}

[data-theme="dark"] {
  --paper:        #14110D;
  --paper-2:      #1D1914;
  --paper-3:      #2A241C;
  --rule:         #E8E1D0;
  --rule-soft:    rgba(232, 225, 208, 0.16);
  --ink:          #F1EBD9;
  --ink-2:        #C7BDA5;
  --ink-3:        #998D75;
  --ink-4:        #6A604F;
  --highlight:    #2D2517;

  --c-blue:       oklch(0.72 0.12 245);
  --c-blue-bg:    oklch(0.28 0.05 245);
  --c-green:      oklch(0.70 0.12 155);
  --c-green-bg:   oklch(0.26 0.05 155);
  --c-amber:      oklch(0.78 0.12 78);
  --c-amber-bg:   oklch(0.28 0.06 70);
  --c-red:        oklch(0.72 0.13 25);
  --c-red-bg:     oklch(0.28 0.05 25);
  --c-violet:     oklch(0.72 0.12 295);
  --c-violet-bg:  oklch(0.28 0.05 295);
}

/* Reset / base */
html, body { overflow-x: hidden; }

.sl, .sl * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sl {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-feature-settings: "kern", "liga", "calt";
  font-variant-numeric: lining-nums;
}

.sl * { min-width: 0; }

.sl h1, .sl h2, .sl h3, .sl h4, .sl h5, .sl h6 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.05;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.sl p { margin: 0; line-height: 1.55; text-wrap: wrap; overflow-wrap: break-word; }

.sl .ui    { font-family: var(--sans); letter-spacing: -0.005em; }
.sl .mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sl .serif { font-family: var(--serif); }

.sl .label-mono {
  font-family: var(--mono);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* Hairline */
.sl hr.rule { border: 0; height: 1px; background: var(--rule); margin: 0; }
.sl hr.rule.soft { background: var(--rule-soft); }
.sl hr.rule.thick { height: 2px; }

/* Selection */
.sl ::selection { background: var(--ink); color: var(--paper); }

/* Chip */
.sl .chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.sl .chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.sl .chip.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sl .chip.blue   { color: var(--c-blue);   border-color: color-mix(in oklch, var(--c-blue) 35%, transparent); }
.sl .chip.green  { color: var(--c-green);  border-color: color-mix(in oklch, var(--c-green) 35%, transparent); }
.sl .chip.amber  { color: var(--c-amber);  border-color: color-mix(in oklch, var(--c-amber) 40%, transparent); }
.sl .chip.red    { color: var(--c-red);    border-color: color-mix(in oklch, var(--c-red) 35%, transparent); }
.sl .chip.violet { color: var(--c-violet); border-color: color-mix(in oklch, var(--c-violet) 35%, transparent); }

/* Force-strength bar (4 segments) */
.sl .force-bar {
  display: inline-flex; gap: 2px; align-items: center;
}
.sl .force-bar .seg {
  width: 14px; height: 6px;
  background: var(--rule-soft);
}
.sl .force-bar.alta      .seg:nth-child(-n+4) { background: var(--c-green); }
.sl .force-bar.moderada  .seg:nth-child(-n+3) { background: var(--c-green); }
.sl .force-bar.limitada  .seg:nth-child(-n+2) { background: var(--c-amber); }
.sl .force-bar.insuf     .seg:nth-child(-n+1) { background: var(--c-red); }

/* Underline link */
.sl a.ed {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule-soft);
  transition: text-decoration-color .15s, color .15s;
}
.sl a.ed:hover { text-decoration-color: var(--ink); }

/* Density control */
.sl[data-density="compact"] { --s-7: 36px; --s-8: 48px; --s-9: 72px; --s-10: 96px; }
.sl[data-density="spacious"] { --s-7: 64px; --s-8: 88px; --s-9: 128px; --s-10: 168px; }