/* Shared design tokens for shop + admin. Traditional palette: kumkum maroon, turmeric gold,
   temple green and peacock blue on handloom ivory. */
:root,
[data-theme="kumkum"] {
  --bg: #FBF3E4;
  --surface: #FFFAF0;
  --tile: #F3E3C6;
  --ink: #34100C;
  --muted: #8A5E48;
  --line: #E9D3AC;
  --primary: #7A1712;   /* kumkum maroon */
  --primary-ink: #FFF6E6;
  --accent: #1E5B4A;    /* temple green */
  --accent-2: #1D3F6E;  /* peacock blue */
  --gold: #C8962E;      /* turmeric / zari */
  --gold-soft: #E7C77A;
  --danger: #A3261B;
  --ok: #1E5B4A;
}
[data-theme="temple"] {
  --primary: #1E5B4A;
  --accent: #7A1712;
  --accent-2: #1D3F6E;
}
[data-theme="peacock"] {
  --primary: #1D3F6E;
  --accent: #7A1712;
  --accent-2: #1E5B4A;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 "Mukta", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .serif { font-family: "Rozha One", Georgia, serif; font-weight: 400; letter-spacing: .01em; margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 2px;
  border: 1px solid var(--primary); background: var(--primary); color: var(--primary-ink);
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 13px;
  cursor: pointer; text-decoration: none; transition: opacity .15s, background .15s;
}
.btn:hover { opacity: .9; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--primary); }
.btn.accent { background: var(--accent); border-color: var(--accent); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.block { width: 100%; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 12px; }

.icon-btn {
  width: 44px; height: 44px; display: inline-grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: inherit; position: relative; border-radius: 50%;
}
.icon-btn:hover { background: rgba(0,0,0,.05); }
.icon-btn svg { width: 22px; height: 22px; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px;
}
.field textarea { min-height: 110px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus,
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  cursor: pointer; white-space: nowrap; font-size: 14px; text-decoration: none; color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.chip:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

.tile-media { background: var(--tile); aspect-ratio: 4 / 5; overflow: hidden; }
.tile-media img, .tile-media svg { width: 100%; height: 100%; object-fit: cover; }

.price { font-weight: 500; }
.mrp { color: var(--muted); text-decoration: line-through; font-size: .9em; margin-left: 6px; }
.off { color: var(--accent); font-size: .85em; margin-left: 6px; font-weight: 500; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: 2px;
  opacity: 0; pointer-events: none; transition: .2s; z-index: 100; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); }

.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty h2 { color: var(--ink); margin-bottom: 8px; font-size: 26px; }

/* ---------- The Tamil name ----------
   The first letter is the logo's ஆ, drawn from the logo file and tinted with the text colour.
   Sizes are in em so it scales with whatever font size the name is set in. */
.tn { white-space: nowrap; font-family: "Noto Serif Tamil", serif; font-weight: 700; }
.tn-aa, .tn-spark { background: currentColor; -webkit-mask: center / 100% 100% no-repeat; mask: center / 100% 100% no-repeat; }
.tn-aa {
  display: inline-block; width: 1.683em; height: 1.603em; vertical-align: -.515em;
  margin: -.55em .06em 0 -.046em;
  -webkit-mask-image: url(/shared/aa-mark.png); mask-image: url(/shared/aa-mark.png);
}
.tn-l { position: relative; display: inline-block; line-height: 1; }
.tn-spark {
  position: absolute; left: 50%; top: -.134em; width: .3em; height: .3em; transform: translateX(-50%);
  -webkit-mask-image: url(/shared/aa-spark.png); mask-image: url(/shared/aa-spark.png);
}