/* 7Stack theme: Warm + Marigold (locked in).
   Cream paper, brown-black ink, marigold signal colour, soft 1px lines, rounded corners, pill buttons
   and gentle shadows. Loaded after styles.css and site.css. Change the look here. */

:root {
  /* ground and ink */
  --color-bg: #fbf6ef;
  --color-surface: #f2e9dd;
  --color-text: #2b211b;
  --color-divider: color-mix(in srgb, #2b211b 20%, transparent);
  /* signal colour: marigold. Ink text sits on it (white would fail contrast) */
  --color-accent: #ffb400;
  --color-accent-2: #ffb400;
  --color-accent-100: #fff6dc;
  --color-accent-200: #ffeab0;
  --color-accent-300: #ffd96b;
  --color-accent-400: #ffc633;
  --color-accent-500: #ffb400;
  --color-accent-600: #e39b00;
  --color-accent-700: #8a5a00;   /* use for accent-coloured text on paper */
  --color-accent-800: #6b4500;
  --color-accent-900: #3d2800;
  --on-accent: var(--color-text);

  /* warm the greys so body copy sits comfortably on cream */
  --color-neutral-100: #f7f0e6;
  --color-neutral-200: #eee4d6;
  --color-neutral-300: #dfd2c1;
  --color-neutral-400: #c4b5a2;
  --color-neutral-500: #a69683;
  --color-neutral-600: #877765;
  --color-neutral-700: #685a4c;
  --color-neutral-800: #4a3e33;
  --color-neutral-900: #33291f;

  /* shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --rule: 1px;
  --radius: 20px;
  --phone-r: 34px;
  --phone-border: 8px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b211b 12%, transparent);
  --shadow-md: 0 6px 18px color-mix(in srgb, #2b211b 12%, transparent);
  --shadow-lg: 0 18px 40px color-mix(in srgb, #2b211b 20%, transparent);
}

/* softer lines: cards and panels use the divider colour, not full ink */
.panel, .duo, .swatches, .product, .store, .surfaces, .seg-btns, .input, .seg { border-color: var(--color-divider); }
.surfaces, .surface { border-color: var(--color-divider); }
.duo-cell + .duo-cell { border-left-color: var(--color-divider); }
.panel-head, .keys, .product-art { border-color: var(--color-divider); }
.cells, .faq, .checks, .details, .section, .nav, .band, .marquee { border-color: var(--color-divider); }
.band { border-top-color: transparent; }
.marquee { border-color: var(--color-text); }
.nav { border-bottom-color: var(--color-divider); }
.nav-links a[aria-current='page'] { border-bottom: 2px solid var(--color-text); }
.table th { border-bottom-color: var(--color-divider); }

/* friendlier controls */
.btn { border-radius: 999px; padding: 10px 20px; }
.btn-lg { padding: 14px 26px; }
.btn-ghost { padding-inline: 12px; }
.btn-secondary { border-color: var(--color-divider); }
.tag { border-radius: 999px; padding: 4px 12px; }
.input { background: #fff; border-radius: var(--radius-md); }
.seg { border-radius: var(--radius-md); }
.seg-btns button { border-radius: 0; }
.nav-cta { padding: 9px 18px; }
.store { background: #fff; }
.keys button { border-color: var(--color-divider); }
.slots div { border-width: 1px; background: #fff; }
.slots div.cur, .slots div.bad { border-width: 2px; }

/* depth */
.panel, .product.featured, .duo { box-shadow: var(--shadow-md); }
.phone { box-shadow: var(--shadow-lg); border-color: #2b211b; }
.product.next { box-shadow: none; }
.link-cell:hover { background: var(--color-accent-100); }

/* headings: a touch looser than the architectural setting */
.h-display, .h-feature, .h-feature2 { letter-spacing: -.028em; }
.eyebrow { letter-spacing: .06em; }

/* photographs and placeholders keep their colour and soften the edge */
.photo, .duo-cell .photo { border-radius: var(--radius); }
.ph { background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, #2b211b 6%, transparent) 14px 15px); }

/* marigold is too light to set as text on paper: the accent word in a headline becomes a marker highlight */
.h-display .red { background: var(--color-accent); color: var(--color-text); padding: 0 .12em; margin-left: -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }