/*
 * BixiCash UI shell tokens — plain CSS custom properties.
 * Source: docs/ui-shell-tokens.md. Do not fork this file per segment; add
 * segment-specific tokens (if ever needed) as additional custom properties in
 * the segment's own stylesheet, layered after this one.
 */

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

@font-face {
  font-family: 'Noto Naskh Arabic';
  src: url('./fonts/NotoNaskhArabic-arabic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  /* Accent — the tenant manifest may override this at render time. */
  --accent: #4656E8;
  --accent-strong: #3646D6;
  --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);

  /* Ink and surfaces */
  --ink: #374151;
  --ink-strong: #1F2937;
  --ink-muted: #6B7280;
  --page-bg: #F9FAFB;
  --surface: #FFFFFF;
  --hairline: rgba(4, 32, 69, .10);
  --control-border: #6B7280;
  --subtle: #F3F4F6;

  /* Status */
  --success: #1F7A4D;
  --success-tint: rgba(31, 122, 77, .10);
  --danger: #B42318;
  --danger-tint: rgba(180, 35, 24, .10);
  --warning: #B54708;
  --warning-tint: rgba(181, 71, 8, .10);
  --mute-tint: #F3F4F6;
  --mute-text: #4B5563;

  /* Radii */
  --radius-sm: 4px;
  --radius-control: 6px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 24px -16px rgba(15, 23, 42, .12);

  /* Type */
  /* Hindi and Chinese use the device's own fonts (Nirmala UI / Noto on Windows and
     Android, PingFang on Apple) rather than multi-megabyte bundled faces. */
  --font-sans: Inter, 'Noto Naskh Arabic', 'Nirmala UI', 'Noto Sans Devanagari', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 11px;
  --text-2xs-line: 16px;
  --text-xs: 12px;
  --text-xs-line: 16px;
  --text-sm: 14px;
  --text-sm-line: 20px;
  --text-md: 16px;
  --text-md-line: 24px;
  --text-lg: 20px;
  --text-lg-line: 28px;

  /* Rhythm and back-office sizes */
  --gap: 16px;
  --section-gap: 24px;
  --card-pad-y: 16px;
  --card-pad-x: 20px;
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --nav-item-h: 40px;
  --control-h: 40px;
  --control-h-sm: 28px;
  --table-header-h: 33px;
  --table-row-h: 65px;

  /* Till sizes (per docs/ui-shell-tokens.md "The till is different") */
  --till-touch-min: 48px;
  --till-tile-w: 112px;
  --till-tile-h: 80px;
}

/* Category palette. Eight hues assigned to product categories, classes and
   people by a stable hash (shared/media.js), so the same category is the same
   colour on every screen and in every segment. Each hue has a solid, a tint
   for backgrounds and an ink that reads on the tint (WCAG AA). */
:root {
  --cat-0: #F59F00; --cat-0-tint: #FFF3D6; --cat-0-ink: #7A4A00;  /* saffron */
  --cat-1: #12B886; --cat-1-tint: #DDF8EE; --cat-1-ink: #09624A;  /* mint */
  --cat-2: #E64980; --cat-2-tint: #FFE6EF; --cat-2-ink: #9C1B47;  /* rose */
  --cat-3: #228BE6; --cat-3-tint: #E2F0FF; --cat-3-ink: #155A99;  /* sky */
  --cat-4: #7950F2; --cat-4-tint: #EEE8FF; --cat-4-ink: #5234B8;  /* violet */
  --cat-5: #74B816; --cat-5-tint: #EEF8DB; --cat-5-ink: #45700C;  /* leaf */
  --cat-6: #FD7E14; --cat-6-tint: #FFEDDC; --cat-6-ink: #9A4A06;  /* marigold */
  --cat-7: #15AABF; --cat-7-tint: #DDF6F9; --cat-7-ink: #0B6776;  /* teal */
}

/* Segment accents: boot() stamps data-segment on <html>. Each accent keeps
   white text at AA contrast on filled buttons. */
[data-segment='retail']     { --accent: #4656E8; --accent-strong: #3646D6; }
[data-segment='bookshop']   { --accent: #8E3FBF; --accent-strong: #7A33A6; }
[data-segment='restaurant'] { --accent: #C2361F; --accent-strong: #A32D1A; }
[data-segment='school']     { --accent: #1971C2; --accent-strong: #155FA3; }
[data-segment='traders']    { --accent: #B45309; --accent-strong: #92400E; }
[data-segment='pharmacy']   { --accent: #0B7D57; --accent-strong: #086A49; }
[data-segment='fastfood']   { --accent: #E8590C; --accent-strong: #C2410C; }
[data-segment='flourmill']  { --accent: #A16207; --accent-strong: #854D0E; }
[data-segment='lubricants'] { --accent: #0E7490; --accent-strong: #155E75; }
[data-segment='distribution'] { --accent: #BE185D; --accent-strong: #9D174D; }
[data-segment='autoparts']  { --accent: #475569; --accent-strong: #334155; }
[data-segment='fuelstation'] { --accent: #0F766E; --accent-strong: #115E59; }

/* Urdu / RTL: Noto Naskh Arabic leads the stack; direction flips via [dir=rtl]
   on <html>, set by shared/i18n.js. Logical properties in components.css and
   print.css do the rest of the mirroring automatically. */
[dir='rtl'] {
  --font-sans: 'Noto Naskh Arabic', Inter, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--text-sm-line);
  color: var(--ink);
  background: var(--page-bg);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

a {
  color: var(--accent-strong);
}

a:hover {
  color: var(--accent);
}

/* Elements hidden with el.hidden stay hidden even when a class sets display. */
[hidden] { display: none !important; }