/* Aeron Chair Repair — base styles
   Visual system: graphite + warm cream + industrial accent.
   Type: Geist (display + body), Geist Mono (technical labels).
*/

:root {
  /* Palette — set by the active tweak. Defaults = "Graphite". */
  --ink:        #131313;
  --paper:     #F3EFE7;
  --paper-2:   #E9E3D6;
  --rule:      #1313131A;
  --rule-2:    #13131326;
  --muted:     #1313137A;
  --accent:    #E85B23;
  --accent-ink:#FFFFFF;
  --ok:        #2E7D32;

  /* Density */
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 9vw, 140px);
  --stack: 16px;

  --max: 1280px;

  /* Type scale */
  --t-eyebrow: 11px;
  --t-body:    16px;
  --t-lead:    19px;
  --t-h3:      24px;
  --t-h2:      clamp(36px, 4.6vw, 64px);
  --t-h1:      clamp(56px, 9vw, 148px);
  --t-mega:    clamp(72px, 13vw, 200px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* Dark variant */
body[data-theme="dark"] {
  --ink:    #F1ECE2;
  --paper:  #0D0D0D;
  --paper-2:#171615;
  --rule:   #F1ECE21A;
  --rule-2: #F1ECE226;
  --muted:  #F1ECE27A;
}

/* Density variants */
body[data-density="compact"] { --section-y: clamp(48px, 6vw, 96px); --gutter: clamp(16px, 3vw, 40px); }
body[data-density="comfy"]   { --section-y: clamp(96px, 11vw, 180px); --gutter: clamp(24px, 5vw, 72px); }

/* Palettes */
body[data-palette="graphite"]  { --ink:#131313; --paper:#F3EFE7; --paper-2:#E9E3D6; --accent:#E85B23; --accent-ink:#FFFFFF; }
body[data-palette="miami"]     { --ink:#0E1416; --paper:#FBF7F2; --paper-2:#FCE6DC; --accent:#0D8C8C; --accent-ink:#FBF7F2; }
body[data-palette="blueprint"] { --ink:#0A1A2E; --paper:#EEF2F6; --paper-2:#DCE5EC; --accent:#F5C518; --accent-ink:#0A1A2E; }
body[data-palette="mono"]      { --ink:#101010; --paper:#F2F1EE; --paper-2:#E5E3DD; --accent:#101010; --accent-ink:#F2F1EE; }

/* Typography */
.eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.022em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -0.035em; line-height: 0.94; }
h2 { font-size: var(--t-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3); letter-spacing: -0.012em; }
p  { margin: 0; }

a  { color: inherit; }
.mono { font-family: "Geist Mono", ui-monospace, monospace; }

/* Containers */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
section { padding-block: var(--section-y); }
.divider { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 16px/1 "Geist", system-ui;
  letter-spacing: -0.01em;
  padding: 18px 24px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow { display:inline-block; transition: transform 200ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-2);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-lg { padding: 22px 28px; font-size: 17px; }

/* Cards */
.card {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 18px;
  padding: 28px;
}
.card-flat {
  background: var(--paper-2);
  border-radius: 18px;
  padding: 28px;
}

/* Tag chip */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--ink);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block; }

/* Reset */
button { font: inherit; }

/* Utility */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--stack); }
.muted { color: var(--muted); }

/* image-slot styling override */
image-slot {
  --slot-bg: var(--paper-2);
  --slot-border: var(--rule-2);
  --slot-color: var(--muted);
}