/* WRM OS design tokens. Confluence (the default look) lives here; other looks
   override these on html[data-look="..."] in styles/looks/. Apps use tokens only. */

@font-face {
  font-family: "Geist";
  src: url("/os/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/os/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/os/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/os/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Brand: the three rivers of the WRM mark. Never recolour them. */
  --amber: #FEBE46;
  --teal: #00ACC1;
  --red: #EF4854;
  --ink: #1B1D21;

  /* Surfaces */
  --bg: #0B0D10;
  --surface: rgb(19 21 26 / 0.80);
  --surface-solid: #15171C;
  --surface-raised: #1B1E24;
  --surface-2: rgb(255 255 255 / 0.04);
  --surface-3: rgb(255 255 255 / 0.075);
  --surface-4: rgb(255 255 255 / 0.12);
  --line: rgb(255 255 255 / 0.07);
  --line-2: rgb(255 255 255 / 0.13);
  --scrim: rgb(5 6 8 / 0.55);

  /* Text */
  --text: #ECEDEF;
  --text-2: #A7ACB6;
  --text-3: #737985;
  --text-on-wallpaper: #F4F5F7;
  --text-shadow-wallpaper: 0 1px 2px rgb(0 0 0 / 0.75), 0 0 12px rgb(0 0 0 / 0.35);

  /* Semantics */
  --accent: var(--amber);
  --on-accent: var(--ink);
  --info: var(--teal);
  --danger: var(--red);
  --ok: #3DB88F;
  --warn: var(--amber);
  --selection: rgb(254 190 70 / 0.16);
  --selection-line: rgb(254 190 70 / 0.55);
  --focus-ring: #4FD1E0;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);

  /* Shape */
  --r-win: 12px;
  --r-pop: 14px;
  --r-ctl: 8px;
  --r-tile: 12px;
  --r-pill: 999px;
  --blur: 24px;
  --shadow-win: 0 32px 80px -24px rgb(0 0 0 / 0.7), 0 12px 28px -14px rgb(0 0 0 / 0.55);
  --shadow-win-idle: 0 18px 44px -20px rgb(0 0 0 / 0.55);
  --shadow-pop: 0 20px 56px -16px rgb(0 0 0 / 0.65);
  --highlight: inset 0 1px 0 rgb(255 255 255 / 0.06);

  /* Type */
  --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --fs-1: 11.5px;
  --fs-2: 13px;
  --fs-3: 15px;
  --fs-4: 19px;
  --fs-5: 28px;
  --fs-6: 44px;
  --lh: 1.45;

  /* Motion */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  /* Chrome metrics */
  --taskbar-h: 52px;
  --titlebar-h: 38px;
  --icon-cell-w: 92px;
  --icon-cell-h: 104px;
  --tile: 50px;
  --glyph: 22px;

  /* Tiles on the desktop and in the launcher */
  --tile-bg: rgb(22 24 30 / 0.62);
  --tile-line: rgb(255 255 255 / 0.12);
  --tile-glyph: #F1F2F4;
}

html[data-motion="reduced"] {
  --dur-1: 0ms;
  --dur-2: 0ms;
  --dur-3: 0ms;
}

@media (pointer: coarse) {
  :root {
    --titlebar-h: 46px;
    --taskbar-h: 58px;
  }
}