/* Okupi design tokens. 1px here = 1dp on device. */
/* Figtree (SIL Open Font License, see fonts/OFL.txt), self-hosted variable font 400-800 */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/figtree-latin.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; }

:root {
  /* Ground and surfaces */
  --bg: #f2efe9;
  --bg-deep: #e9e4db;
  --surface: #ffffff;
  --surface-2: #f8f6f1;
  --surface-sunk: #ece8e0;
  --line: #e4dfd5;
  --line-strong: #d3ccbf;

  /* Ink */
  --ink: #1f1d19;
  --ink-2: #57524a;
  --ink-3: #6b655b;
  --ink-inverse: #fffdf8;

  /* Action: sunflower. Only for the one primary action, today, and the active tab. */
  --sun: #f7b928;
  --sun-press: #eaa912;
  --sun-soft: #fdefc6;
  --sun-ink: #3b2a00;

  /* Pastel families: separate kinds of things, never decoration */
  --peach: #f7dace;      --peach-ink: #7b2f1d;   /* booking, guests */
  --lilac: #dfd9f6;      --lilac-ink: #45388a;   /* extras, team */
  --sage: #d8e8d4;       --sage-ink: #2c5531;    /* money in */
  --sky: #d6e6f2;        --sky-ink: #1f4a6b;     /* files, sheets */

  /* Payment status (mirrors the sheet: green Lunas, yellow DP, red Belum bayar) */
  --unpaid-deep: #6e1610; /* text on unpaid/error washes */
  --dp-deep: #5c3c00;     /* text on dp/warn washes */
  --paid: #2b7246;       --paid-bg: #dcefe1;
  --dp: #8a5a00;         --dp-bg: #fcebc0;
  --unpaid: #b3261e;     --unpaid-bg: #f9dedb;
  --conflict: #b3261e;

  /* Type */
  --font: "Figtree", "Roboto", system-ui, sans-serif;
  --t-display: 600 32px/38px var(--font);
  --t-headline: 700 24px/30px var(--font);
  --t-title-l: 700 20px/26px var(--font);
  --t-title: 600 17px/23px var(--font);
  --t-body: 400 15px/22px var(--font);
  --t-body-m: 500 15px/22px var(--font);
  --t-label: 600 14px/18px var(--font);
  --t-caption: 500 13px/18px var(--font);
  --t-micro: 600 12px/16px var(--font);

  /* Shape */
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-tile: 14px;      /* icon-tile: 40-56px squircles, calendar cells */
  --r-meter: 6px;      /* 6-10px tall bars */
  --r-pill: 999px;

  /* Space (4dp grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --gutter: 20px;

  /* Depth: soft, offset, warm */
  --shadow-1: 0 1px 2px rgba(70, 52, 20, .06), 0 2px 8px rgba(70, 52, 20, .05);
  --shadow-2: 0 2px 4px rgba(70, 52, 20, .05), 0 10px 24px rgba(70, 52, 20, .09);
  --shadow-sun: 0 4px 10px rgba(214, 150, 10, .28), 0 1px 2px rgba(150, 100, 0, .2);

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur: 180ms;
}