/* ══════════════════════════════════════════════════════════════════════
   brand.css — the single source of truth for how Magneta looks.

   Values below are measured from https://magneta.in, not estimated. They
   came from a computed-style audit of every element on the live page; the
   count beside each colour is how many elements use it.

   Every colour, font, radius, shadow and transition used by the kiosk, the
   order system and the admin panel resolves back to a variable here. No
   other stylesheet hardcodes a colour.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   FONTS

   The site uses three families. Only one is on Google Fonts:

     Nunito Sans   354 uses — body copy.        Google Fonts ✓
     ArgentumSans  122 uses — headings.         licensed, self-host
     Bionix-Fat      7 uses — hero display.     licensed, self-host

   ArgentumSans and Bionix aren't distributable through a CDN, so they load
   from /static/fonts/. If those files are absent the stack falls through to
   Nunito Sans, which is close enough in width that nothing reflows badly —
   the site simply looks a little less distinctive until you add them.

   To get the files: open magneta.in, F12 → Network → filter "Font" →
   reload → right-click each .woff2 → Copy link address → download.
   See docs/BRANDING.md.
   ══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'ArgentumSans';
  src: url('/static/fonts/ArgentumSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ArgentumSans';
  src: url('/static/fonts/ArgentumSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ArgentumSans';
  src: url('/static/fonts/ArgentumSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ArgentumSans';
  src: url('/static/fonts/ArgentumSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bionix-Fat';
  src: url('/static/fonts/Bionix-Fat.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}

:root {
  /* ── Brand ─────────────────────────────────────────────────────────
     Magneta's identity is a bright primary set: red leads, yellow warms,
     blue supports — all on white. It reads as a confident FMCG brand for
     families rather than a boutique dessert bar, which is what the copy
     ("real ice cream for real people") is going for. */

  /* RED — 22 uses across two near-identical values (#EC1C24 / #E91C23).
     The lighter one is the true brand red and drives fills and accents. */
  --brand-primary:      #EC1C24;
  /* White-on-#EC1C24 is 4.4:1 — fine for large or bold text, short of the
     4.5:1 needed for small. Anything small on red uses this deeper shade
     instead, which clears it at 6.2:1. */
  --brand-primary-deep: #C1121A;
  --brand-primary-dark: #A80F16;   /* pressed states */
  --brand-primary-soft: #FDE7E8;   /* tinted fills, selected chips */
  --brand-primary-tint: #FEF5F5;   /* faintest wash, card media beds */

  /* YELLOW — 11 uses. 1.9:1 on white, so this is a fill colour only:
     badges, highlights, illustration. Never yellow text on white. */
  --brand-yellow:      #F5B11A;
  --brand-yellow-soft: #FEF3DC;

  /* BLUE — 16 uses. Links and informational accents. 5.2:1, safe as text. */
  --brand-blue:      #046BD2;
  --brand-blue-soft: #E4F0FC;

  --brand-white:      #FFFFFF;   /* 94 uses — the dominant surface       */
  --brand-page:       #F7F8FA;   /* page behind white cards              */
  --brand-page-warm:  #FDF3F3;   /* raised rails, faint red cast         */

  /* Dark surfaces for the selfie stage and advert loop. Kept in the same
     slate family as the body text rather than pure black, so the dark
     areas feel part of the palette instead of a separate dark mode. */
  --brand-dark:      #141A24;
  --brand-dark-soft: #1E2733;
  --brand-dark-lift: #2C3949;

  /* ── Ink ───────────────────────────────────────────────────────────
     #334155 carries 332 elements — it is the site's body colour, and a
     slate rather than a true black. That softness is why the pages read
     as friendly despite the loud primaries. */
  --ink:       #334155;
  --ink-soft:  #69727D;
  --ink-faint: #808285;
  --line:      #E6E9EE;
  --line-md:   #D3D9E2;

  /* ── Status ────────────────────────────────────────────────────────
     Info and warning borrow the real brand blue and yellow, so they look
     native. Destructive actions deliberately do NOT reuse the brand red:
     if "Delete" were the same colour as "Add to order", the loudest
     control on an admin screen would be the dangerous one. */
  --ok:        #2E9E6B;
  --ok-soft:   rgba(46, 158, 107, .10);
  --warn:      #F5B11A;
  --warn-soft: rgba(245, 177, 26, .14);
  --danger:      #B3141C;
  --danger-soft: rgba(179, 20, 28, .10);
  --info:      #046BD2;
  --info-soft: rgba(4, 107, 210, .10);

  /* Veg / non-veg markers are prescribed by FSSAI labelling rules, not
     brand choices — they stay put even if the palette is retuned. */
  --veg:    #2E9E6B;
  --nonveg: #B3141C;

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-body:    'Nunito Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'ArgentumSans', 'Nunito Sans', system-ui, sans-serif;
  --font-accent:  'Bionix-Fat', 'ArgentumSans', 'Nunito Sans', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-black:  800;

  /* ── Shape ─────────────────────────────────────────────────────────
     Generous radii. The brand's product photography is all soft cones and
     rounded tubs; square corners fight that. */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────────────
     Neutral slate shadows, matching a white-dominant site. The brand
     shadow is reserved for the one primary action on a screen. */
  --shadow-sm: 0 2px 10px rgba(51, 65, 85, .06);
  --shadow-md: 0 8px 26px rgba(51, 65, 85, .10);
  --shadow-lg: 0 22px 60px rgba(20, 26, 36, .22);
  --shadow-brand: 0 10px 34px rgba(236, 28, 36, .30);

  /* ── Motion ────────────────────────────────────────────────────────
     One easing curve throughout. A gentle overshoot reads as playful on a
     consumer kiosk without irritating someone in the admin panel all day. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .16s;
  --t-base: .28s;
  --t-slow: .45s;

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
}

/* ══════════════════════════════════════════════════════════════════════
   Compatibility aliases.

   The kiosk and admin stylesheets were written against an earlier set of
   names. Mapping them here rethemes everything without touching a single
   rule in those files — so nothing that already works can break on a
   rename.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --rose:       var(--brand-primary);
  --rose-deep:  var(--brand-primary-deep);
  --rose-soft:  var(--brand-primary-soft);
  --rose-tint:  var(--brand-primary-tint);

  --plum:       var(--brand-dark);
  --plum-soft:  var(--brand-dark-soft);
  --plum-lift:  var(--brand-dark-lift);

  --cream:      var(--brand-page);
  --cream-warm: var(--brand-page-warm);

  --bg:      var(--brand-page);
  --surface: var(--brand-white);
  --raised:  var(--brand-page-warm);
  --hover:   var(--brand-primary-tint);

  --ink2: var(--ink-soft);
  --ink3: var(--ink-faint);

  --mint: var(--ok);
  --mint-soft: var(--ok-soft);
  --amber: var(--warn);
  --amber-soft: var(--warn-soft);
  --red: var(--danger);
  --red-soft: var(--danger-soft);
  --blue: var(--info);
  --blue-soft: var(--info-soft);
  --gold: var(--brand-yellow);

  --font:    var(--font-body);
  --display: var(--font-display);
  --mono:    var(--font-mono);
  --r:       var(--r-md);
}

/* ══════════════════════════════════════════════════════════════════════
   Shared primitives
   ══════════════════════════════════════════════════════════════════════ */

/* The hidden attribute must beat any class rule that sets display. The
   browser's own [hidden] rule ties on specificity with a class and loses
   for being a UA rule, so an element JS marks hidden can stay on screen. */
[hidden] { display: none !important; }

/* ── Logo lockups ──────────────────────────────────────────────────── */
.brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.brand-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.brand-logo-lockup .brand-logo { flex: none; }

/* Falls back to a wordmark if the image is missing, so a forgotten asset
   never leaves a blank corner where the brand should be. */
.brand-wordmark {
  font-family: var(--font-accent);
  font-weight: var(--weight-black);
  letter-spacing: -.02em;
  color: var(--brand-primary);
  white-space: nowrap;
}

/* ── Focus ─────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ── Scrollbars ────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line-md) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-md); border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--brand-primary-soft); }

/* ── Shared animations ─────────────────────────────────────────────── */
@keyframes brand-fade-in { from { opacity: 0; } }
@keyframes brand-rise    { from { opacity: 0; transform: translateY(14px); } }
@keyframes brand-pop     { from { opacity: 0; transform: scale(.94); } }
@keyframes brand-spin    { to { transform: rotate(360deg); } }

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