@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* type */
  --font-ui: "Inter", "Helvetica Neue", sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;

  /* interface ink */
  --ink: #fff9ef;
  --ink-soft: #f6e7d5;
  --ink-muted: rgba(255, 249, 239, 0.68);
  --ink-dark: #241d33;
  --transparent: rgba(0, 0, 0, 0);

  /* glass */
  --glass-fill: rgba(42, 30, 56, 0.44);
  --glass-fill-soft: rgba(255, 255, 255, 0.1);
  --glass-fill-strong: rgba(255, 255, 255, 0.2);
  --glass-stroke: rgba(255, 255, 255, 0.36);
  --glass-stroke-soft: rgba(255, 255, 255, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.58);
  --glass-inner: rgba(255, 255, 255, 0.13);
  --glass-shade: rgba(23, 14, 31, 0.38);
  --glass-hover: rgba(255, 255, 255, 0.24);
  --glass-active: rgba(255, 255, 255, 0.31);
  --bubble-top: rgba(53, 38, 70, 0.72);
  --bubble-fill: rgba(33, 23, 46, 0.72);
  --panel-top: rgba(52, 39, 68, 0.72);
  --panel-fill: rgba(24, 17, 35, 0.82);
  --chip-fill: rgba(255, 255, 255, 0.14);
  --chip-stroke: rgba(255, 255, 255, 0.24);
  --chip-hover: rgba(255, 255, 255, 0.23);
  --scrim: rgba(20, 14, 32, 0.26);
  --focus: #ffe1a1;
  --focus-halo: rgba(255, 225, 161, 0.34);

  /* actions */
  --action-talk: #b78bff;
  --action-talk-deep: #7447d8;
  --action-talk-soft: rgba(183, 139, 255, 0.38);
  --action-draw: #58baff;
  --action-draw-deep: #2478ce;
  --action-draw-soft: rgba(88, 186, 255, 0.38);
  --action-glyph: #fffdf8;
  --action-ring: rgba(255, 255, 255, 0.52);
  --action-shadow: rgba(24, 16, 38, 0.34);

  /* zones */
  --zone-learn: #ffc96f;
  --zone-learn-soft: rgba(255, 201, 111, 0.34);
  --zone-workshop: #ff9f72;
  --zone-workshop-soft: rgba(255, 159, 114, 0.34);
  --zone-studio: #7fc9ff;
  --zone-studio-soft: rgba(127, 201, 255, 0.34);
  --zone-arcade: #b896ff;
  --zone-arcade-soft: rgba(184, 150, 255, 0.34);

  /* sky and light */
  --sky-top: #352b6d;
  --sky-upper: #704685;
  --sky-mid: #c2758f;
  --sky-horizon: #ffc077;
  --sky-low: #ff8d64;
  --sky-deep: #d9787a;
  --sun-core: #fff7dd;
  --sun-glow: #ffd18d;
  --sun-warm: #ffb36d;
  --cloud-lit: #ffd1b2;
  --cloud-shade: #b884a0;
  --star: #fff3d8;
  --fog: #cd8a89;
  --bounce: #ffd7a7;
  --ambient-sky: #ffe0c2;
  --ambient-ground: #513848;
  --shadow: rgba(42, 26, 46, 0.28);

  /* water */
  --water-deep: #16304d;
  --water-mid: #2b6078;
  --water-light: #79ada9;
  --water-glint: #ffe5b1;
  --water-foam: #d3e9df;

  /* island A: meadow */
  --island-a-grass-light: #a7dc6d;
  --island-a-grass: #83c456;
  --island-a-grass-mid: #6aad4b;
  --island-a-grass-dark: #4d873b;
  --island-a-rim: #3b6d34;
  --island-a-rock-light: #9d6a59;
  --island-a-rock: #754b45;
  --island-a-rock-dark: #52343b;
  --island-a-rock-deep: #34232f;
  --island-a-sand: #f0d194;
  --island-a-sand-dark: #c8a46c;
  --island-a-trunk: #6b4838;
  --island-a-leaf-light: #82c25e;
  --island-a-leaf: #4d954e;
  --island-a-leaf-dark: #2f7042;
  --island-a-flower: #ffe18c;
  --island-a-stone: #dbc4a6;

  /* island B: tide garden */
  --island-b-grass-light: #a4e2ba;
  --island-b-grass: #7fc7a2;
  --island-b-grass-mid: #63b48e;
  --island-b-grass-dark: #43856f;
  --island-b-rim: #316b61;
  --island-b-rock-light: #9187a9;
  --island-b-rock: #69627f;
  --island-b-rock-dark: #494662;
  --island-b-rock-deep: #2d2b45;
  --island-b-sand: #e7d5c6;
  --island-b-sand-dark: #bda493;
  --island-b-trunk: #665260;
  --island-b-leaf-light: #9ad8b4;
  --island-b-leaf: #5aa79b;
  --island-b-leaf-dark: #397c7b;
  --island-b-flower: #ffb7c7;
  --island-b-stone: #cac5d7;

  /* built world */
  --world-paper: #f1dcc0;
  --world-paper-light: #ffe8c9;
  --world-paper-warm: #ffd59a;
  --world-plaster: #e8cba5;
  --world-wood: #8a5a3b;
  --world-wood-light: #b57d4e;
  --world-wood-dark: #5f3b2d;
  --world-metal: #c1935d;
  --world-metal-light: #e3b878;
  --world-metal-dark: #6b5144;
  --world-ink: #30263a;
  --world-ink-soft: #58445a;
  --world-glow: #ffe2a3;
  --world-glow-white: #fff8e6;
  --world-glow-blue: #78d9ff;
  --world-glass: #b7a5f2;
  --world-screen: #231b42;
  --world-screen-glow: #7df2ff;
  --world-smoke: #d9cad6;
  --world-paint-red: #ff7e7a;
  --world-paint-yellow: #ffd166;
  --world-paint-blue: #72c8ff;
  --world-paint-green: #86d18b;
  --world-paint-pink: #ff9dc4;
  --world-roof-rust: #b65b4d;
  --world-roof-dark: #7e3e3c;
  --world-book-a: #e7a85d;
  --world-book-b: #7fbf9f;
  --world-book-c: #c58ac7;
  --world-book-d: #e8d59e;

  /* avatar */
  --avatar-bg: #f7c995;
  --avatar-coat: #6b6ad6;
  --avatar-skin: #f2c7a5;
  --avatar-skin-warm: #b97a55;
  --avatar-hair: #4a3037;
  --avatar-ink: #2c2130;
  --avatar-ring: rgba(255, 255, 255, 0.45);
  --avatar-b-top: #ff9f72;
  --avatar-b-top-light: #ffc09c;
  --avatar-b-bottom: #3f7f76;
  --avatar-b-hair: #5b352b;
  --avatar-b-shoe: #3a2e46;
  --avatar-b-accent: #ffd166;

  /* player */
  --player-skin: #e8b48e;
  --player-hair: #3f2c3a;
  --player-jacket: #6f68d8;
  --player-jacket-light: #8a83eb;
  --player-trousers: #3b4b74;
  --player-shoe: #272a40;
  --player-pack: #e0a05f;
  --player-scarf: #ffb36d;

  /* guide */
  --guide-core: #ffe9ac;
  --guide-glow: #ffca79;
  --guide-face: #3a2a35;
  --guide-cheek: #ffb59d;
  --particle: #ffe6ad;
  --particle-core: #fff8de;
  --bridge-glow: #ffdc94;
  --bridge-core: #fff8dc;
  --bridge-stone: #8d6b58;
  --bridge-rail: #6f4c47;

  /* layout */
  --pad: 24px;
  --pad-sm: 16px;
  --radius-lg: 30px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --blur: 22px;
  --ease: cubic-bezier(0.22, 0.75, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 720px) {
  :root {
    --pad: 16px;
    --pad-sm: 12px;
    --radius-lg: 26px;
    --blur: 18px;
  }
}