/* AHT design tokens. Every colour, font, radius and space lives here; the other sheets read only these.
   The owner's colour choice (Customize → AHT shop → Colours) overrides the --aht-red family below.
   --aht-red fills buttons and badges; --aht-red-text is the same colour where it sits as text or a thin line on white. */
:root {
  /* Colour */
  --aht-ink: #1b1b1b;
  --aht-ink-soft: #5a5a5a;
  --aht-red: #d61f1f;
  --aht-red-dark: #b01818;
  --aht-on-red: #ffffff;
  --aht-red-text: var(--aht-red);
  /* Fills may be a gradient (Gold); --aht-red stays one solid colour for lines, tints and mixes. */
  --aht-red-fill: var(--aht-red);
  /* Buttons: one even colour at rest; Gold adds a light streak that only crosses on hover. */
  --aht-red-sheen: var(--aht-red-fill);
  --aht-red-text-fill: var(--aht-red-text);
  --aht-red-text-sheen: var(--aht-red-text);
  --aht-hero-ground: linear-gradient(120deg, #fffaf0, #f5e9d0);
  /* Light tints of the owner's colour: the Best sellers band and the Wholesale panel. Gold sets its own champagne. */
  --aht-tint: color-mix(in srgb, var(--aht-red) 14%, #fff);
  --aht-tint-ground: linear-gradient(120deg, color-mix(in srgb, var(--aht-red) 4%, #fff), color-mix(in srgb, var(--aht-red) 18%, #fff));
  --aht-paper: #ffffff;
  --aht-ground: #f4f4f2;
  --aht-line: #e3e3df;
  --aht-on-ink-soft: #c9c9c9;
  --aht-gold: #e0a800;
  /* Black leads and red follows: WhatsApp buttons and "in stock" use black too (the WhatsApp icon says what it is). */
  --aht-whatsapp: var(--aht-ink);
  --aht-ok: var(--aht-ink);
  --aht-focus: #1d4ed8;

  /* Type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  /* Nastaliq covers only Urdu letters (assets/fonts, Arabic subset); Latin and digits fall through to the UI font. */
  --font-urdu: "Noto Nastaliq Urdu", var(--font-ui);
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;

  /* Shape and space */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --tap: 48px;
  --wrap: 1320px;
  --gutter: 16px;
  --header-h: 60px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.06);
}
@media (min-width: 720px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; --text-lg: 1.625rem; --text-xl: 2rem; } }