/* ===========================================================================
   Loyal Sathi — design tokens
   The single source of truth for colour, type, space, depth and motion.
   Loaded before app.css and admin.css so both panels share one system.

   Everything is self-hosted: no CDN, no build step, no external request.
   =========================================================================== */

/* ------------------------------------------------------------------ type --
   Two variable fonts, subset to latin, served from our own /assets/fonts.
   Devanagari (कथा) falls through to the system stack, which every modern
   phone and desktop covers — bundling a Devanagari face would add ~200 KB.
   font-display:swap so text paints immediately on a slow Nepali connection. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2-variations'),
       url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-var.woff2') format('woff2-variations'),
       url('../fonts/playfair-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Montserrat — the wordmark's own typeface, and now the whole product's:
   the public site, both panels, and the customer's stamp card.

   It used to be reserved for the platform's own surfaces on the reasoning that
   a shop's card should wear the shop's identity. In practice that identity is
   carried by the shop's colours, logo and cover photo, and the split just made
   the panel and the card look like two different products to the one person who
   sees both. SIL Open Font License. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-var.woff2') format('woff2-variations'),
       url('../fonts/montserrat-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- brand ------------------------------------------------------------ */
  --navy:        #16323F;
  --navy-deep:   #0E232D;
  --navy-soft:   #1E4152;
  --gold:        #D9A93A;
  --gold-soft:   #EFD9A0;
  --cream:       #FBF7EF;
  --ink:         #1E2A2E;

  /* Brand gold only reaches ~1.9:1 on cream, so it can never carry text on a
     light background. This deeper gold hits WCAG AA and is what gold-coloured
     text, small icons and pill labels use on light surfaces. --gold stays for
     fills, rules and anything sitting on navy. */
  --gold-ink:    #7D5A1B;
  --gold-wash:   #F5E9CF;

  /* --- surfaces --------------------------------------------------------- */
  --bg:          #F7F3EA;
  --surface:     #FFFFFF;
  --surface-2:   #FBF7EF;
  --surface-3:   #F1EADC;
  --line:        #E7DFCE;
  --line-strong: #D6CBB4;

  /* --- text ------------------------------------------------------------- */
  --text:        #1E2A2E;
  --text-muted:  #5F7078;
  --text-soft:   #8A97A0;
  --text-on-dark:#FBF7EF;

  /* --- status ----------------------------------------------------------- */
  --ok:          #2F6B45;
  --ok-bg:       #E6F0E9;
  --warn:        #7D5A1B;
  --warn-bg:     #FBF0D8;
  --danger:      #A6342B;
  --danger-bg:   #FBE9E6;
  --info:        #1F5673;
  --info-bg:     #E4EFF4;

  /* --- typography ------------------------------------------------------- */
  /* Montserrat everywhere — the panels, the public site and the customer's own
     card. It used to be Playfair headings on Inter body here, with the panels
     overriding to Montserrat in admin.css, which meant a shop owner saw one
     typeface in their panel and their customers saw another. One product should
     read as one product; a shop's identity is carried by its colours, its logo
     and its cover photo, which is plenty.

     Kept as two tokens rather than collapsed into one so a display face can be
     reintroduced later without touching every rule that asks for it. */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* A fifth-based type scale. Body stays 16px so mobile Safari never zooms. */
  --t-xs:   0.6875rem;  /* 11px — labels, meta */
  --t-sm:   0.8125rem;  /* 13px — secondary */
  --t-base: 1rem;       /* 16px — body */
  --t-md:   1.125rem;   /* 18px */
  --t-lg:   1.375rem;   /* 22px */
  --t-xl:   1.75rem;    /* 28px */
  --t-2xl:  2.25rem;    /* 36px */
  --t-3xl:  3rem;       /* 48px — the stamp count */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  --track-tight: -0.02em;
  --track-wide:   0.08em;

  /* --- space (4px base) -------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* --- radius ----------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 999px;

  /* --- depth ------------------------------------------------------------
     Warm-tinted shadows: a neutral grey shadow on a cream page reads dirty. */
  --shadow-xs: 0 1px 2px rgba(30, 42, 46, 0.06);
  --shadow-sm: 0 2px 8px rgba(30, 42, 46, 0.07);
  --shadow-md: 0 6px 20px rgba(30, 42, 46, 0.09);
  --shadow-lg: 0 16px 40px rgba(30, 42, 46, 0.13);
  --shadow-gold: 0 8px 28px rgba(217, 169, 58, 0.32);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.45);

  /* --- motion -----------------------------------------------------------
     Expo-out: fast start, long soft settle. Reads as "considered". */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in:   cubic-bezier(0.32, 0, 0.67, 0);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;

  /* --- layout ----------------------------------------------------------- */
  --app-max: 480px;
  --admin-max: 1240px;

  /* --- the handset ------------------------------------------------------
   * Three places draw a phone around the customer's card: the owner's preview
   * inside the panel (admin/preview.php), the demo on the marketing site
   * (/demo) and the showcase on the home page. They were hand-written and did
   * not agree — the preview was 390 x 720 and the demo was a 376-wide screen
   * clamped between 470px and 620px tall, so the card an owner tried on the
   * website was a different shape from the card the panel showed them.
   *
   * One set of numbers, in the file both stylesheets already load. 390 x 720
   * is the preview's, because that is the one an owner checks their real card
   * against; the demo now matches it rather than the other way round.
   */
  --phone-w:      390px;
  --phone-h:      720px;
  --phone-bezel:  10px;
  --phone-radius: 30px;

  /* Respect notches and the iOS home indicator. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* --- signature gradients ---------------------------------------------- */
  --grad-navy: linear-gradient(155deg, #1E4152 0%, #16323F 45%, #0E232D 100%);
  --grad-gold: linear-gradient(135deg, #EFD9A0 0%, #D9A93A 55%, #BE8C22 100%);
  --grad-sheen: linear-gradient(115deg,
      rgba(255,255,255,0) 25%,
      rgba(255,255,255,0.22) 48%,
      rgba(255,255,255,0) 68%);
}

/* --------------------------------------------------------------- base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','ss01';
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  margin: 0;
}

/* Numbers that change (stamp counts, totals, PINs) must not reflow as they
   tick, so every numeric display is tabular. */
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- a11y ------ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- icons --- */
/* Inline stroke icons from the sprite. Sized in em so they scale with text. */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  display: inline-block;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 1em;    height: 1em; }
.icon-lg { width: 1.75em; height: 1.75em; }
.icon-xl { width: 2.5em;  height: 2.5em; }
.icon-fill { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------- motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}