/* Atticus v2 — design tokens
   Less Roman metaphor, more "product on Tuesday morning".
   Quiet ink, paper, and a single ochre accent.
*/

:root {
  /* Surfaces */
  --paper:       #f6f2ea;     /* slide background */
  --paper-2:     #ece6d6;
  --card:        #ffffff;     /* product chrome (dashboards, forms) */
  --card-2:      #fbf8f1;
  --ink:         #14181d;
  --ink-2:       #232a32;
  --ink-3:       #3a444f;
  --muted:       #6c7480;
  --muted-2:     #9aa1ab;
  --rule:        #d9d2c1;
  --rule-2:      #e8e3d4;

  /* Accents — used sparingly */
  --accent:      #b08a3e;     /* ochre / brass */
  --accent-2:    #cda861;
  --good:        #466b3f;     /* approval green */
  --warn:        #a8762a;     /* needs review */
  --bad:         #8b2a2a;     /* reject / suppress */
  --info:        #2f4d6e;

  /* Slide type scale @ 1920x1080 */
  --t-display:   144px;
  --t-h1:        80px;
  --t-h2:        56px;
  --t-h3:        40px;
  --t-body:      30px;
  --t-small:     24px;
  --t-tiny:      20px;
  --t-eyebrow:   18px;

  /* Product UI scale (for embedded screens) */
  --ui-h:        28px;
  --ui-body:     20px;
  --ui-small:    17px;
  --ui-mono:     16px;

  --pad-x:       96px;
  --pad-y:       80px;

  /* Type families */
  --serif: "Source Serif 4", "Source Serif Pro", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}

/* Optional palettes (for the tweak) */
[data-palette="ink"] {
  --paper:   #11151a;
  --paper-2: #1a2028;
  --card:    #1c232c;
  --card-2:  #232b35;
  --ink:     #f3eee2;
  --ink-2:   #e3dccb;
  --ink-3:   #c8c0a8;
  --muted:   #9099a4;
  --muted-2: #6f7682;
  --rule:    #2c3540;
  --rule-2:  #232b35;
}

[data-palette="warm"] {
  --paper:   #f7f0df;
  --paper-2: #ece1c3;
  --card:    #fffaf0;
  --rule:    #cdbf9a;
  --accent:  #8d5a1f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #0a0e12;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

deck-stage { background: #0a0e12; }

deck-stage > section {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  position: relative;
}

/* ---- slide chrome ---- */
.slide {
  width: 100%; height: 100%;
  padding: var(--pad-y) var(--pad-x);
  display: flex; flex-direction: column;
  position: relative;
}
.slide.dark { background: var(--ink); color: var(--paper); }
.slide.card { background: var(--card); }

.chrome-mark {
  position: absolute;
  top: 40px; left: var(--pad-x);
  font-family: var(--serif);
  font-size: 22px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.chrome-mark .glyph {
  width: 26px; height: 26px;
  border: 1.25px solid currentColor;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0;
}
.slide.dark .chrome-mark { color: var(--paper); }

.chrome-folio {
  position: absolute;
  top: 44px; right: var(--pad-x);
  font-family: var(--mono);
  font-size: 14px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.slide.dark .chrome-folio { color: var(--muted-2); }

.chrome-foot {
  position: absolute;
  bottom: 40px; left: var(--pad-x); right: var(--pad-x);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono);
  font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.slide.dark .chrome-foot { color: var(--muted-2); }

/* ---- type primitives ---- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0; color: inherit;
  text-wrap: pretty;
}

.title-md {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: pretty;
}

.subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--ink-3);
  margin: 0;
  text-wrap: pretty;
}
.slide.dark .subtitle { color: var(--ink-2); }

.body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.42;
  color: var(--ink);
  margin: 0;
}
.body.dim { color: var(--ink-3); }

.small {
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: 1.45;
}

.label {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.rule { height: 1px; background: var(--rule); border: 0; }
.rule-thick { height: 2px; background: var(--ink); border: 0; }

/* product-screen utilities — used inside <ProductFrame/> */
.ui {
  font-family: var(--sans);
  font-size: var(--ui-body);
  color: var(--ink);
}
.ui-mono { font-family: var(--mono); font-size: var(--ui-mono); }
.ui-small { font-size: var(--ui-small); }

/* status pills (used in dashboard rows) */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  font-weight: 600;
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

@media print {
  html, body, deck-stage { background: white; }
}