/* Brand pack: g8 — "Invoice360 POS" by G8 (bir360.app).

   TOKENS AND ASSETS ONLY. This file sets the fonts, the motif and the colour
   tokens app.css reads; it never styles a component. Loaded after app.css.
   Shapes live in auth-g8.css (sign-in and setup) and chrome-g8.css (every
   other screen and the kiosk).

   The look (owner, 2026-10-05): "like Alibaba design and like g8research.com".
   From the enterprise console: a clean white page, 1 px hairlines, a flat
   white top bar and small-radius rectangular buttons. From g8research.com:
   Outfit and the G8 orange as the accent. Formal (owner, 2026-10-16): one
   face, flat surfaces, no glass and no glow.

   Orange that carries white text is #AD5600 (5.1:1). The mark's own orange
   (#F57F01, 2.65:1 on white) is for fills, marks and glows only. Focus is the
   G8 teal, so a ring never disappears into an orange button. */

/* Outfit: g8research.com's body face. Self-hosted, because the CSP allows
   fonts from this origin only. OFL-1.1, ../brands/g8/fonts/OFL-Outfit.txt.
   Outfit has no peso sign (U+20B1): its latin-ext range leaves it out, and a
   one-glyph subset of Manrope (OFL-1.1, ../brands/g8/fonts/OFL-Manrope.txt)
   supplies it under the same family name. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../brands/g8/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations"),
       url("../brands/g8/fonts/outfit-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../brands/g8/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../brands/g8/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B0, U+20B2-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../brands/g8/fonts/peso-manrope-wght-normal.woff2") format("woff2-variations"),
       url("../brands/g8/fonts/peso-manrope-wght-normal.woff2") format("woff2");
  unicode-range: U+20B1;
}
:root {
  /* ---- theme-invariant ---- */
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* One face for everything (owner, 2026-10-16: formal): headings are Outfit too. */
  --font-display: var(--font);
  --motif-image: url("../brands/g8/motif.svg");   /* the mark's circuit traces */
  --arrow-image: url("../brands/g8/arrow.svg");   /* the pill call to action's round arrow */
  --shadow-tint: 38 38 38;

  /* ---- ramps ---- */
  --g8-orange-50: #fff4e8;
  --g8-orange-100: #ffe6cc;
  --g8-orange-200: #ffcb94;
  --g8-orange-300: #ffb35c;
  --g8-orange-400: #ff9a2e;
  --g8-orange: #f57f01;          /* the mark */
  --g8-orange-560: #e06f00;      /* marks on white: 3.26:1 */
  --g8-orange-600: #ad5600;      /* carries white text: 5.1:1 */
  --g8-orange-700: #944a00;
  --g8-orange-800: #7a3d00;
  --g8-orange-900: #2b1d0e;

  --g8-teal-50: #e9f3f6;
  --g8-teal-200: #9ad8ee;
  --g8-teal-300: #6cc4e4;
  --g8-teal-500: #0f6a8c;
  --g8-teal: #094e69;            /* the mark */
  --g8-teal-700: #073e54;
  --g8-teal-800: #12303c;

  --g8-ink: #262626;             /* g8research.com's text */
  --g8-slate-50: #f5f6f8;        /* the console page */
  --g8-slate-100: #f0f2f5;
  --g8-slate-200: #e5e7eb;       /* the hairline */
  --g8-slate-300: #dfe3e8;
  --g8-slate-500: #8a8f98;
  --g8-slate-600: #5d6470;
  --g8-slate-700: #3f4650;
  --g8-char: #1f1a17;            /* warm charcoal: the hero bands */
  --g8-char-900: #120f0d;
  --g8-char-muted: #d6ccc3;

  --g8-night-950: #0f1012;
  --g8-night-900: #141518;
  --g8-night-850: #17181b;
  --g8-night-800: #1f2024;
  --g8-night-700: #2a2b30;
  --g8-night-line: #2c2d32;
  --g8-night-500: #6e7079;
  --g8-night-300: #a1a1aa;
  --g8-night-100: #ececee;

  /* ---- semantic: light ---- */
  --bg: var(--g8-slate-50);
  --surface: #ffffff;
  --surface-2: var(--g8-slate-100);
  --surface-3: var(--g8-slate-200);
  --text: var(--g8-ink);
  --muted: var(--g8-slate-600);
  --border: var(--g8-slate-200);
  --border-strong: var(--g8-slate-500);   /* inputs: 3.25:1 on white */

  --primary: var(--g8-orange-600);
  --primary-hover: var(--g8-orange-700);
  --on-primary: #ffffff;
  --primary-soft: var(--g8-orange-50);

  --accent: var(--g8-orange);            /* fills and marks only, never small text */
  --on-accent: var(--n-900);
  --accent-ink: var(--g8-orange-700);    /* orange that may carry text */
  --accent-soft: var(--g8-orange-50);
  --figure: var(--g8-orange-700);        /* key figures: totals, net sales */

  --info-bg: var(--g8-teal-50);
  --info-text: var(--g8-teal-700);

  --focus: var(--g8-teal-500);           /* 6.07:1 on white */
  --focus-on-brand: var(--g8-teal-500);

  /* The top bar: flat white over a hairline, the current page underlined. */
  --bar-bg: #ffffff;
  --bar-text: var(--g8-ink);
  --bar-muted: var(--g8-slate-600);
  --bar-hover: var(--g8-slate-50);
  --bar-line: var(--g8-slate-200);
  --bar-mark: var(--g8-orange-560);
  --mark-bg: #ffffff;

  --demo-bg: var(--g8-ink);
  --demo-text: #f3efe8;
  --demo-chip-bg: var(--g8-orange);
  --demo-chip-text: var(--n-900);

  /* Offline inverts the bar: ink in light, pale orange in dark. */
  --offline-bg: var(--g8-ink);
  --offline-text: #ffffff;
  --offline-dot: var(--g8-orange-400);
  --offline-soft: var(--g8-orange-50);
  --offline-soft-text: var(--g8-orange-800);

  --stage-bg: var(--g8-slate-100);       /* the receipt card's counter-top */
  --motif: var(--g8-slate-300);          /* the circuit traces in empty states */
  --hero-bg: var(--g8-char);
  --hero-text: #ffffff;
  --hero-muted: var(--g8-char-muted);
  --hero-figure: var(--g8-orange-300);
  --hero-motif: rgb(245 127 1 / 0.16);
  --backdrop: rgb(15 16 18 / 0.55);

  /* ---- the pack's own (chrome-g8.css, auth-g8.css) ---- */
  --cta: var(--g8-orange-600);           /* the pill call to action */
  --cta-hover: var(--g8-orange-700);
  --on-cta: #ffffff;
  --cta-dot: rgb(255 255 255 / 0.2);     /* the round arrow's disc, on the pill */
  --glow: rgb(245 127 1 / 0.22);         /* the warm glow: decoration only */
  --glow-2: rgb(255 179 92 / 0.28);
  --glass: rgb(255 255 255 / 0.78);
  --glass-line: rgb(255 255 255 / 0.9);
  --card-shadow: 0 1px 2px rgb(38 38 38 / 0.04), 0 12px 32px rgb(38 38 38 / 0.08);
  --tile-line: var(--g8-slate-200);

  /* ---- the sign-in and setup screens (auth-g8.css): a warm white field
     with an orange glow, one glass card, white keys and a pill sign-in ---- */
  --auth-field: var(--g8-slate-50);
  --auth-field-text: var(--g8-ink);
  --auth-field-muted: var(--g8-slate-600);
  --auth-pattern: var(--glow);           /* decoration only */
  --auth-panel: #ffffff;
  --auth-rule: var(--g8-slate-200);
  --auth-console: #ffffff;
  --auth-console-text: var(--g8-ink);
  --auth-console-muted: var(--g8-slate-600);
  --auth-focus: var(--focus);
  --display-bg: var(--g8-slate-50);
  --display-text: var(--g8-ink);
  --key-bg: #ffffff;
  --key-text: var(--g8-ink);
  --key-edge: var(--g8-slate-200);
  --key-hover: var(--g8-orange-50);
  --key-fn-bg: var(--g8-slate-50);
  --key-fn-text: var(--g8-slate-700);
  --pick-bg: var(--g8-orange-50);
  --pick-text: var(--g8-ink);
  --pick-mark: var(--g8-orange-600);
  --submit-bg: var(--cta);
  --submit-text: var(--on-cta);
  --submit-hover: var(--cta-hover);
  --strip-bg: var(--g8-ink);
  --strip-text: #ffffff;

  /* ---- the self-order kiosk (kiosk.css): always the light theme, so these
     are set once and never change with the device's preference ---- */
  --kiosk-brand: var(--g8-char);
  --kiosk-brand-deep: var(--g8-char-900);
  --kiosk-on-brand: #ffffff;
  --kiosk-brand-muted: var(--g8-char-muted);
  --kiosk-hero-figure: var(--g8-orange-300);
  --kiosk-accent: var(--g8-orange-600);
  --kiosk-accent-hover: var(--g8-orange-700);
  --kiosk-on-accent: #ffffff;
  --kiosk-plate: var(--g8-orange-50);
  --kiosk-ink: var(--g8-char);
  --kiosk-ink-soft: #f5f0eb;
  --kiosk-figure: var(--g8-orange-700);
  --kiosk-focus: var(--g8-teal-500);
  --kiosk-focus-on-brand: var(--g8-orange-300);
  --kiosk-glow: rgb(245 127 1 / 0.42);   /* decoration only */
  --kiosk-glow-2: rgb(255 179 92 / 0.22);
  --kiosk-glass: rgb(255 255 255 / 0.1);
  --kiosk-glass-line: rgb(255 255 255 / 0.3);
  --kiosk-line: var(--g8-slate-200);
  --kiosk-shadow: 0 1px 2px rgb(38 38 38 / 0.05), 0 8px 24px rgb(38 38 38 / 0.07);
  --kiosk-shadow-lift: 0 2px 6px rgb(38 38 38 / 0.08), 0 18px 40px rgb(38 38 38 / 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--g8-night-950);
    --surface: var(--g8-night-850);
    --surface-2: var(--g8-night-800);
    --surface-3: var(--g8-night-700);
    --text: var(--g8-night-100);
    --muted: var(--g8-night-300);
    --border: var(--g8-night-line);
    --border-strong: var(--g8-night-500);

    --primary: var(--g8-orange-400);
    --primary-hover: var(--g8-orange-300);
    --on-primary: var(--n-900);
    --primary-soft: var(--g8-orange-900);

    --accent: var(--g8-orange);
    --on-accent: var(--n-900);
    --accent-ink: var(--g8-orange-300);
    --accent-soft: var(--g8-orange-900);
    --figure: var(--g8-orange-300);

    --info-bg: var(--g8-teal-800);
    --info-text: #cde4ec;

    --focus: var(--g8-teal-300);
    --focus-on-brand: var(--g8-teal-300);

    --bar-bg: var(--g8-night-900);
    --bar-text: var(--g8-night-100);
    --bar-muted: var(--g8-night-300);
    --bar-hover: rgb(255 255 255 / 0.06);
    --bar-line: var(--g8-night-line);
    --bar-mark: var(--g8-orange-400);
    --mark-bg: #ffffff;

    --demo-bg: var(--g8-orange-900);
    --demo-text: var(--g8-orange-200);
    --demo-chip-bg: var(--g8-orange);
    --demo-chip-text: var(--n-900);

    --offline-bg: var(--g8-orange-100);
    --offline-text: var(--g8-orange-900);
    --offline-dot: var(--g8-orange-600);
    --offline-soft: var(--g8-orange-900);
    --offline-soft-text: var(--g8-orange-200);

    --stage-bg: #0b0c0e;
    --motif: var(--g8-night-700);
    --hero-bg: #201a15;
    --hero-text: #ffffff;
    --hero-muted: var(--g8-char-muted);
    --hero-figure: var(--g8-orange-300);
    --hero-motif: rgb(245 127 1 / 0.2);
    --backdrop: rgb(0 0 0 / 0.6);

    --cta: var(--g8-orange-400);
    --cta-hover: var(--g8-orange-300);
    --on-cta: var(--n-900);
    --cta-dot: rgb(28 27 25 / 0.14);
    --glow: rgb(245 127 1 / 0.2);
    --glow-2: rgb(255 154 46 / 0.12);
    --glass: rgb(23 24 27 / 0.78);
    --glass-line: rgb(255 255 255 / 0.08);
    --card-shadow: 0 0 0 1px var(--g8-night-line);
    --tile-line: var(--g8-night-line);

    --auth-field: var(--g8-night-950);
    --auth-field-text: var(--g8-night-100);
    --auth-field-muted: var(--g8-night-300);
    --auth-pattern: var(--glow);
    --auth-panel: var(--g8-night-850);
    --auth-rule: var(--g8-night-line);
    --auth-console: var(--g8-night-850);
    --auth-console-text: var(--g8-night-100);
    --auth-console-muted: var(--g8-night-300);
    --auth-focus: var(--focus);
    --display-bg: var(--g8-night-800);
    --display-text: var(--g8-night-100);
    --key-bg: var(--g8-night-800);
    --key-text: var(--g8-night-100);
    --key-edge: var(--g8-night-line);
    --key-hover: var(--g8-orange-900);
    --key-fn-bg: var(--g8-night-850);
    --key-fn-text: var(--g8-night-300);
    --pick-bg: var(--g8-orange-900);
    --pick-text: var(--g8-night-100);
    --pick-mark: var(--g8-orange-400);
    --submit-bg: var(--cta);
    --submit-text: var(--on-cta);
    --submit-hover: var(--cta-hover);
    --strip-bg: #000000;
    --strip-text: #ffffff;
  }
}