/* Design tokens — lifted 1:1 from the Figma variables on Flora-Michalon-System.
   Do not invent values here. If something is missing, pull it from Figma. */

@font-face {
  font-family: "Suisse Intl";
  src: url("../fonts/SuisseIntl-Book.woff2") format("woff2");
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("../fonts/SuisseIntl-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --grey-background-100: #e7e7e7;
  --grey-background-90: rgba(231, 231, 231, 0.9);
  --grey-background-0: rgba(231, 231, 231, 0);
  /* primary/50 — the project pages' own ground. */
  --primary-50: #f4f4f4;
  --primary-100: #e7e7e7;
  --primary-white: #ffffff;
  --greyscale-500: #8b8b8b;
  --greyscale-700: #3a3a3a;
  --text-secondary: #4d4d4d;
  --text-tertiary: #8b8b8b;
  --nav-default: #4d4d4d;
  --border-action: #0a1fe4;
  --surface-nav-bg: rgba(203, 203, 203, 0.6);
  --surface-nav-bg-hover: rgba(139, 139, 139, 0.4);
  --nav-hover: #3a3a3a;
  --primary-black: #1d1d1d;
  --primary-400: #b9b9b9;
  --primary-800: #2b2b2b;
  --text-primary-light: #ffffff;
  --text-secondary-dark: #4d4d4d;
  --text-secondary-light: #8b8b8b;
  --glassy-black-300: rgba(0, 0, 0, 0.6);
  --glassy-black-400: rgba(0, 0, 0, 0.4);
  --glassy-white-200: rgba(255, 255, 255, 0.8);
  --glassy-dark-400: rgba(139, 139, 139, 0.4);
  --surface-tooltip: rgba(139, 139, 139, 0.8);
  --headline-ink: #1d1d1d;
  --headtitle-ink: #81818b;
  /* About page — Figma 98:2109, raw hex on the Textsection components */
  --text-about-title: #242424;
  --text-about-body: #686868;
  --caption-ink: #7f7f7f;
  --caption-location-ink: #999999;
  --text-project-primary: #2b2b2b;
  /* Project pages — Figma text/project/* */
  --text-project-date: #313131;
  --text-project-location: #9a999e;
  --text-project-title-grey: #8b8b8b;
  --text-project-title-dark: #3a3a3a;
  --text-project-introduction: #3a3a3a;
  --text-project-meta-label: #8b8b8b;
  --text-project-key-label: #313131;
  --surface-button-primary-black: #3a3a3a;
  --surface-button-primary-white: rgba(255, 255, 255, 0.8);

  /* Type */
  --font-headings: "Suisse Intl", system-ui, sans-serif;
  --font-body: "Suisse Intl", system-ui, sans-serif;
  --weight-book: 450;
  --weight-regular: 400;
  --h1-size: 28px;
  --h1-line: 36px;
  /* H2 — the size the project title takes on a phone (174:28063). */
  --h2-size: 24px;
  --h2-line: 32px;
  --h3-size: 18px;
  --h3-line: 26px;
  --h4-size: 14px;
  --h4-line: 20px;
  --caption-size: 14px;
  --caption-line: 20px;
  --body-16-size: 16px;
  --body-16-line: 22px;
  --body-14-size: 14px;
  --body-14-line: 20px;
  --body-13-size: 13px;
  --body-13-line: 19px;

  /* Space */
  --space-0: 0px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
  --space-project-gap: 12px;
  --space-project-images: 64px;
  /* Every big image container shares one ratio. Measured off the Figma, where
     Issue-small, Issue-big and Image-Full-width are all 1232 x ~738. Change it
     here and all of them follow — that is the point of it being a token. */
  --ratio-project-image: 1232 / 738;
  /* Every project card thumbnail, wherever a card appears: the home list, the
     project nav's centre, the crosslink footer. One shape everywhere is what
     lets a card travel between them as a pure scale, with nothing reshaping
     mid-flight — which is what the click animation needs.

     Figma draws it as 542/406.5 on the home, 85/64 in the nav and 163/123 in
     the footer. Those are the same 4:3 rounded to whole pixels in three
     different places; here it is written once, exactly. */
  --ratio-project-card: 4 / 3;

  /* Every card hover on the site moves on this, and only this.

     280ms rather than the 400 traced off aparelho.studio, and an ease-out
     rather than their symmetric ease-in-out: an ease-in-out starts slowly,
     which on a hover reads as the card hesitating before it answers. Leaving
     at once and settling gently is what makes the same distance feel quicker
     without actually rushing it. */
  --hover-travel: 280ms;
  --hover-ease: cubic-bezier(0.33, 1, 0.68, 1);

  /* Radius */
  --radius-6: 6px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-full: 999px;

  /* Effects */
  --blur-8: 8px;
  --blur-16: 8px; /* Figma's Blur/16 effect is a radius of 8 */

  /* Layout — the Figma page is 1280 wide with a 640 column */
  --column: 640px;
}