/* Design tokens shared across every template (home, case study, contact) */

@font-face {
  font-family: "Google Sans Code";
  src: local("Google Sans Code Light");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans Code";
  src: local("Google Sans Code");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
Font: 		Atp-Krawel
Style: 		Regular
URL: 		https://youworkforthem.com/font/T30489/atp-krawel
Foundry: 	Typeparties
Foundry: 	https://youworkforthem.com/designer/2083/typeparties
Copyright:
Version: 	18
License: 	https://www.youworkforthem.com/font-license
License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
			WebFont license rules. All other parties are strictly restricted
			from using the WebFonts(s) listed without a purchased license.
			All details above must always remain unaltered and visible in your CSS.
*/

@font-face {
  font-family: "ATP-Krawel";
  src: url("../fonts/atp-krawel.woff2") format("woff2"),
       url("../fonts/atp-krawel.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text: #121212;
  --color-border: #bebebe;
  --color-placeholder: #d9d9d9;
  --color-accent-blue: #cce7ff;
  --color-accent-pink: #ffd5e8;

  /* Type */
  --font-body: "Google Sans Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: "ATP-Krawel", "Times New Roman", Georgia, serif;

  --text-body: 14px;
  --text-tag: 16px;
  --text-section-heading: 74px;
  --text-hero: 168px;
  --text-wireframe-label: 100px;

  --leading-body: 1.6;

  /* Layout */
  --page-max-width: 1440px;
  --page-gutter: 74px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-pill: 999px;

  --space-xs: 24px;
  --space-sm: 48px;
  --space-md: 76px;
  --space-lg: 86px;

  /* Motion — shared easing + initial page-load choreography timing.
     Scroll-triggered reveals (css/reveal.css) are separate and unaffected. */
  --ease-load: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);

  --load-squiggle-duration: 1.4s;
  --load-squiggle-delay-1: 0.1s;
  --load-squiggle-delay-2: 0.3s;
  --load-squiggle-delay-3: 0.5s;

  --load-title-duration: 2s;
  --load-title-delay: 0.2s;

  --load-underline-duration: 1.4s;
  --load-underline-delay: 2s;
}

@media (max-width: 900px) {
  :root {
    --page-gutter: 32px;
    --text-section-heading: 44px;
    --text-hero: 72px;
    --text-wireframe-label: 56px;
  }
}

@media (max-width: 560px) {
  :root {
    --page-gutter: 20px;
    --text-hero: 48px;
    --text-section-heading: 34px;
    --text-wireframe-label: 40px;
  }
}