/* Desk Y design tokens. Every world and the stage read these; nobody redefines them.
   Colours are sampled from the desk pictures (midday) and tuned by eye. Worlds are light at every time of day. */
@font-face { font-family: "Onest"; src: url("fonts/onest-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }

:root {
  color-scheme: light;

  /* ground and surfaces: cool white, never cream */
  --ground: #f4f5f8;
  --surface: #ffffff;
  --grey-1: #e6e8ee;
  --grey-2: #bcc3d1;          /* the wall in the morning picture */
  --wall: #d9d4d3;            /* the wall at midday; rare */

  /* ink */
  --ink: #1c1d21;
  --ink-2: #565a66;
  --ink-3: #7c8190;           /* captions on white only at 12 px and up (contrast 3.9 to 1): prefer --ink-2 for text */
  --hairline: rgba(28, 29, 33, .12);
  --hairline-2: rgba(28, 29, 33, .06);

  /* the accent: sun yellow. Fills, marks and focus. Never text on white (1.9 to 1). Text on yellow is --ink. */
  --sun: #eab016;
  --sun-deep: #c9940a;        /* a pressed or hovered fill */
  --sun-soft: #fbf0c9;        /* a tint for selected rows and highlights */
  --sun-ink: #6b4e00;         /* yellow-family text on white or on --sun-soft (7 to 1) */

  /* rare seconds, from the pictures */
  --brass: #b59058;
  --walnut: #70462b;
  --leaf: #4b6e28;
  --graphite: #424241;
  --night: #1a1a1d;

  /* state colours for data worlds; quiet, cool, never the accent */
  --good: #2f7d4f;
  --good-soft: #e3f1e8;
  --warn: #a8590c;
  --warn-soft: #fbead6;
  --bad: #b3303f;
  --bad-soft: #fae3e6;
  --info: #3a5bb8;
  --info-soft: #e4eaf8;

  /* type */
  --font: "Plex Arabic", "Onest", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "Caveat", "Bradley Hand", cursive;   /* only for the handwritten words on the desk */
  --fs-0: 11px;               /* the floor: nothing smaller */
  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 20px;
  --fs-5: 28px;
  --fs-6: 40px;
  --fs-7: 56px;
  --fs-8: 80px;

  /* 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; --s-9: 96px;

  /* corners */
  --r-1: 10px; --r-2: 16px; --r-3: 24px; --r-full: 999px;

  /* shadows: soft and cool */
  --shadow-1: 0 1px 2px rgba(28, 35, 60, .05), 0 4px 12px rgba(28, 35, 60, .06);
  --shadow-2: 0 2px 4px rgba(28, 35, 60, .05), 0 12px 32px rgba(28, 35, 60, .10);
  --shadow-3: 0 4px 8px rgba(28, 35, 60, .05), 0 30px 80px rgba(28, 35, 60, .18);

  /* motion */
  --t-1: 160ms; --t-2: 280ms; --t-3: 520ms; --t-4: 900ms;
  --ease: cubic-bezier(.2, .7, .2, 1);          /* the standard ease */
  --spring: cubic-bezier(.34, 1.4, .44, 1);     /* the soft spring: a little overshoot */

  /* where the Back control sits; keep this corner free */
  --back-top: 16px; --back-left: 16px; --back-h: 40px;
}