/* Hallmark · scope: app (kiosk) · tokens for the IBDE kiosk */
/* IBDE kiosk theme. Change colours, fonts and proportions here only.
   Every other stylesheet reads these variables. */

/* Typeface: Avenir (brand font).
   Macs and iPads have Avenir Next built in, so previews on a Mac show it.
   The Android kiosk does not, so it uses the fallbacks in --font-brand until a
   properly licensed web font file is supplied. Never add an unlicensed file.

   When the licensed files arrive, put them in public/fonts/ and remove the
   comment markers below. Keep the family name 'IBDE Avenir'.

@font-face { font-family: 'IBDE Avenir'; src: url('../fonts/avenir-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBDE Avenir'; src: url('../fonts/avenir-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBDE Avenir'; src: url('../fonts/avenir-demi.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBDE Avenir'; src: url('../fonts/avenir-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
*/

:root {
  /* Brand */
  --brand: #1c39bb;          /* IBDE blue, from the website theme */
  --brand-deep: #0d1a5c;     /* attract screen and home masthead */
  --brand-deeper: #08113d;
  --brand-soft: #e6eafb;     /* pale blue for chips and highlights */
  --on-brand: #fffdf8;
  --on-brand-soft: #c9d1f5;  /* secondary text on blue */
  --accent: #d9a441;         /* warm gold, used sparingly */

  /* Paper and ink */
  --paper: #f5f1e8;          /* page background */
  --paper-raised: #fffdf8;   /* tiles and panels */
  --paper-sunk: #ebe5d8;     /* behind covers */
  --line: #ddd5c4;
  --ink: #15172a;
  --ink-soft: #4b5068;
  --ink-faint: #7a7f93;
  --sold: #9a968d;
  --danger: #a32020;
  --shadow: rgba(13, 20, 60, 0.18);
  --shadow-strong: rgba(5, 10, 40, 0.45);
  --backdrop: rgba(8, 17, 61, 0.55);
  --spine: rgba(0, 0, 0, 0.28);
  --spine-end: rgba(0, 0, 0, 0);

  /* Soft tints behind the home category tiles */
  --tint-1: #e6ebf8;
  --tint-2: #f3e5e0;
  --tint-3: #e2eee8;
  --tint-4: #f4ebd9;
  --tint-5: #ebe5f2;
  --tint-6: #e0edef;
  --qr-dark: #000000;   /* QR codes stay pure black on white so phones read them easily */
  --qr-light: #ffffff;
  --notice-bg: #f8e4e1;
  --scrim: rgba(5, 10, 40, 0.62); /* dims the screen behind "Masih di sini?" */
  --mask: #000000; /* used only to fade the edge of sideways-scrolling rows */

  /* Generated covers (used when a book has no photo) */
  --cover-1: #1f3a5f;
  --cover-2: #7a2e2e;
  --cover-3: #2f5d50;
  --cover-4: #8a5a1f;
  --cover-5: #4a3466;
  --cover-6: #23464f;
  --cover-7: #6b2c4a;
  --cover-8: #3b3f45;
  --cover-ink: #f7f1e3;
  --cover-rule: rgba(247, 241, 227, 0.55);

  /* Book photo shape. 150% = 2:3 portrait cover. Use 100% for square photos. */
  --cover-ratio: 150%;
  --cover-fit: contain;      /* contain = never crop a cover; cover = fill the frame */
  --cover-radius: 0.375rem;

  /* Type */
  --font-brand: 'IBDE Avenir', 'Avenir Next', Avenir, 'Nunito Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-brand); /* headings and book titles */
  --font-ui: var(--font-brand);      /* everything else */

  /* Type weights (Avenir: 400 regular, 500 medium, 600 demi, 700 bold) */
  --weight-body: 400;
  --weight-label: 500;
  --weight-strong: 600;
  --weight-heading: 700;

  /* Proportions (1rem = 16px on a 1080 px wide screen; everything scales) */
  --gutter: 3.5rem;
  --dock-height: 9rem;
  --radius: 1.25rem;
  --radius-pill: 999rem;
  --tap: 4.5rem;             /* smallest touch target: 72px on the reference screen */
}