/* Calculators by Intellectz — card theme
   Applied ONLY to: wallpaper, curtain, upholstery, measurements, door.
   Loaded AFTER /shared/style.css and overrides it.
   Design language: the intellectz.ai card system — light ground,
   heavy grotesque type, layered pastel cards, big radii, pill
   controls, near-black ink, indigo primary. */

:root {
  /* Palette (intellectz.ai brand card system) */
  --set-paper: #F4F4F6;        /* app background */
  --set-ink: #111118;          /* primary text */
  --set-ink-soft: #6B6B78;     /* muted text */
  --set-line: #E2E2E8;         /* hairlines */
  --set-white: #FFFFFF;        /* card white */

  --set-tan: #C9A6F2;         /* lavender */
  --set-sage: #DCE85F;        /* lime */
  --set-ochre: #DBA7EF;       /* orchid */
  --set-grey: #DCDCE2;
  --set-rose: #F2A98C;        /* soft coral */
  --set-red: #4B4EDB;         /* indigo — primary action */
  --set-yellow: #DCE85F;      /* lime — highlights/notes */
  --set-orange: #DCE85F;      /* lime accent on dark cards */
  --set-green-dot: #2FD06A;

  /* Remap the existing design tokens so everything inherits */
  --iz-accent: var(--set-ink);          /* accents become ink */
  --iz-dark: var(--set-ink);
  --iz-text: var(--set-ink);
  --iz-muted: var(--set-ink-soft);
  --iz-border: var(--set-line);
  --iz-bg: var(--set-paper);
  --iz-card: var(--set-white);
  --radius: 24px;
}

body {
  background: var(--set-paper);
  color: var(--set-ink);
  font-family: -apple-system, "Helvetica Neue", "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* ---------- Typography ---------- */

h1, .page-title {
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--set-ink);
}

.section-label {
  color: var(--set-ink);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
}

/* ---------- Top bar ---------- */

.top-bar a, .back-link {
  color: var(--set-ink);
  font-weight: 600;
}

.badge, .auth-badge {
  background: var(--set-ink);
  color: var(--set-paper);
  border: none;
  border-radius: 999px;
  font-weight: 700;
}

/* ---------- Cards ---------- */

.card {
  background: var(--set-white);
  border: none;
  border-radius: 28px;
  box-shadow: 0 1px 0 rgba(20, 20, 20, 0.05);
  padding: 22px;
}

/* Tinted cards by position — the layered-stack feel from the reference.
   Section cards cycle through the earthy palette. */
.card:nth-of-type(5n+1) { background: var(--set-white); }
.card:nth-of-type(5n+2) { background: #EFE7FA; }  /* soft lavender */
.card:nth-of-type(5n+3) { background: #F2F5D9; }  /* soft lime */
.card:nth-of-type(5n+4) { background: #F7EAF9; }  /* soft orchid */
.card:nth-of-type(5n)   { background: #E9E9F9; }  /* soft indigo */

/* Sub-cards (walls, windows, pieces) get strong tints like the stacked files */
.sub-card, .wall-card, .window-card, .piece-card, .item-card {
  border: none;
  border-radius: 22px;
  background: var(--set-white);
}
.sub-card:nth-of-type(5n+1), .wall-card:nth-of-type(5n+1), .window-card:nth-of-type(5n+1), .piece-card:nth-of-type(5n+1) { background: var(--set-tan); }
.sub-card:nth-of-type(5n+2), .wall-card:nth-of-type(5n+2), .window-card:nth-of-type(5n+2), .piece-card:nth-of-type(5n+2) { background: var(--set-sage); }
.sub-card:nth-of-type(5n+3), .wall-card:nth-of-type(5n+3), .window-card:nth-of-type(5n+3), .piece-card:nth-of-type(5n+3) { background: var(--set-ochre); }
.sub-card:nth-of-type(5n+4), .wall-card:nth-of-type(5n+4), .window-card:nth-of-type(5n+4), .piece-card:nth-of-type(5n+4) { background: var(--set-grey); }
.sub-card:nth-of-type(5n),   .wall-card:nth-of-type(5n),   .window-card:nth-of-type(5n),   .piece-card:nth-of-type(5n)   { background: var(--set-rose); }

/* ---------- Inputs ---------- */

input[type="text"], input[type="number"], input[type="email"],
input[type="date"], textarea, select {
  background: var(--set-white);
  border: 1.5px solid var(--set-ink);
  border-radius: 16px;
  color: var(--set-ink);
  font-weight: 500;
}

input::placeholder, textarea::placeholder {
  color: #A9A49B;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--set-ink);
  outline: 2px solid rgba(20, 20, 20, 0.15);
}

/* ---------- Pills & toggles ---------- */

.pill, .pill-group button, .unit-toggle button, .option-pill {
  border: 1.5px solid var(--set-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--set-ink);
  font-weight: 600;
}

.pill.active, .pill-group button.active, .unit-toggle button.active, .option-pill.active {
  background: var(--set-ink);
  color: var(--set-paper);
  border-color: var(--set-ink);
}

/* ---------- Option grids (hanging system etc.) ---------- */

.option-grid > *, .option-card {
  border: 1.5px solid var(--set-line);
  border-radius: 18px;
  background: var(--set-white);
}
.option-grid > *.active, .option-card.active {
  border-color: var(--set-ink);
  background: var(--set-yellow);
  color: var(--set-ink);
}

/* ---------- Counters / steppers ---------- */

.counter button, .stepper button {
  border: 1.5px solid var(--set-ink);
  background: var(--set-white);
  color: var(--set-ink);
  border-radius: 50%;
}

/* ---------- Buttons ---------- */

.btn-primary {
  background: var(--set-red);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  border: none;
}
.btn-primary:active { background: #3A3DBB; }

.btn-secondary, .btn-outline {
  border: 1.5px solid var(--set-ink);
  color: var(--set-ink);
  background: transparent;
  border-radius: 999px;
  font-weight: 600;
}

.btn-dark {
  background: var(--set-ink);
  color: var(--set-paper);
  border-radius: 999px;
  font-weight: 700;
}

.add-btn, .add-row-btn, .dashed-add {
  border: 1.5px dashed var(--set-ink);
  border-radius: 999px;
  color: var(--set-ink);
  background: transparent;
  font-weight: 700;
}

/* ---------- Result / summary cards ---------- */

.result-card, .summary-bar {
  background: var(--set-ink);
  color: var(--set-paper);
  border-radius: 28px;
}
.result-card .result-label, .summary-bar .stat-label {
  color: var(--set-orange);
  font-weight: 800;
}
.result-card .result-value, .summary-bar .stat-value {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- Range slider ---------- */

input[type="range"] {
  accent-color: var(--set-red);
}

/* ---------- Notes section ---------- */

.notes-section {
  background: var(--set-yellow);
  border: none;
  border-radius: 24px;
}
.notes-section .notes-title { color: var(--set-ink); font-weight: 800; }

/* ---------- Photo zones ---------- */

.photo-zone {
  border: 1.5px dashed var(--set-ink);
  border-radius: 22px;
  background: var(--set-white);
}

/* ---------- Footer ---------- */

.app-footer {
  color: var(--set-ink-soft);
  border-top: 1px solid var(--set-line);
}