/*
 * theme.css — Mithai Ghar. Flat saffron + sindoor-red signboard palette,
 * hard edges (4px corners), no soft shadow tiers. Opens light.
 */

:root {
  --canvas: #fff8ec;
  --surface: #fffcf6;
  --surface-2: #fdecc9;
  --border: #2b1409;
  --border-strong: #2b1409;
  --ink: #2b1409;
  --muted: #76665c;
  --accent: #b5122e;
  --accent-hover: #8f0e24;
  --accent-ink: #fff8ec;
  --accent-text: #b5122e;
  --accent-strong: #b5122e;
  --accent-soft: #fbe0c6;
  --accent-border: #b5122e;
  --success: #2f6b2f;
  --success-ink: #fff8ec;
  --success-soft: #e2ecdc;
  --success-strong: #24521f;
  --warning: #d98e1b;
  --warning-ink: #2b1409;
  --warning-soft: #f6e3bd;
  --warning-strong: #8a5a0c;
  --danger: #b5122e;
  --danger-ink: #fff8ec;
  --danger-soft: #f7dcd9;
  --danger-strong: #8f0e24;
  --chart-1: #b5122e;
  --chart-2: #d98e1b;
  --chart-3: #2b1409;
  --chart-4: #76665c;
  --chart-5: #8f0e24;
  --chart-6: #f2b705;

  --font-display: "Baloo 2", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Mukta", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Mukta", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  /* Flat, hard-edge shape system — no rounded corners anywhere */
  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --border-w: 2px;
  --border-strong-w: 2px;
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-btn: none;
  --card-pad: 1.75rem;
  --caps: none;
  --btn-weight: 700;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #1c0d07;
  --surface: #26130a;
  --surface-2: #341a0d;
  --border: #fff8ec;
  --border-strong: #fff8ec;
  --ink: #fff3e1;
  --muted: #cbb4a1;
  --accent: #e0446a;
  --accent-hover: #ee5d80;
  --accent-ink: #1c0d07;
  --accent-text: #ff7a93;
  --accent-strong: #ffb3c2;
  --accent-soft: #3a1620;
  --accent-border: #e0446a;
  --success: #6fae62;
  --success-ink: #10210c;
  --success-soft: #1e3018;
  --success-strong: #a3d194;
  --warning: #eeae3e;
  --warning-ink: #2b1a03;
  --warning-soft: #3a2a0c;
  --warning-strong: #f6cd80;
  --danger: #e0446a;
  --danger-ink: #1c0d07;
  --danger-soft: #3a1620;
  --danger-strong: #ffb3c2;
  --chart-1: #e0446a;
  --chart-2: #eeae3e;
  --chart-3: #fff3e1;
  --chart-4: #cbb4a1;
  --chart-5: #ff7a93;
  --chart-6: #f2d94e;
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */

/* ---- Jhalak mosaic ------------------------------------------------------
   An uneven-height strip of five photographs, touching at every edge —
   the one screen that makes this page a mithai shop and not a template. */
.jhalak {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.jhalak-item {
  position: relative;
  overflow: hidden;
  height: 48vw;
  max-height: 280px;
}
.jhalak-item:last-child { grid-column: span 2; }
.jhalak-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jhalak-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--canvas);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

@media (min-width: 1024px) {
  .jhalak {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 240px);
    grid-auto-flow: column;
  }
  .jhalak-item { height: 100%; max-height: none; }
  .jhalak-item:last-child { grid-column: auto; }
  .jhalak-item.tall { grid-row: span 2; }
  .jhalak-caption { font-size: 1rem; padding: 0.5rem 0.9rem; }
}

/* A flat geometric marker — a solid circle, never a shadow or gradient. */
.mark-dot {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  background: currentColor;
  border-radius: 999px;
}

/* Bold-geometric decoration on the about band — a flat circle and a flat
   square, cut from the same ink at low opacity. Never a gradient. */
.geo-circle {
  position: absolute;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning-ink) 12%, transparent);
  pointer-events: none;
}
.geo-square {
  position: absolute;
  background: color-mix(in srgb, var(--warning-ink) 12%, transparent);
  pointer-events: none;
}