/* posadka.pl design tokens ("Polska Szkoła Plakatu"), from design_handoff_posadka_design_system.
   The handoff's tokens.css, with the fonts self-hosted (latin + latin-ext: Polish letters). */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat Brush";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/caveat-brush-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat Brush";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/caveat-brush-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* colour */
  --ps-cream: #F1E8D6;
  --ps-black: #171513;
  --ps-red: #E0412B;
  --ps-ochre: #E9A825;
  --ps-green: #1F5B48;
  --ps-cobalt: #2648A6;
  --ps-canvas: #E7DFCE;

  /* type */
  --ps-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --ps-font-brush: "Caveat Brush", cursive;
  --ps-text-display-xl: 800 clamp(56px, 9vw, 132px)/1 var(--ps-font-display);
  --ps-tracking-display-xl: -0.04em;
  --ps-text-display-l: 800 clamp(44px, 6.5vw, 104px)/1 var(--ps-font-display);
  --ps-tracking-display-l: -0.04em;
  --ps-text-heading: 800 clamp(32px, 4vw, 56px)/1.05 var(--ps-font-display);
  --ps-tracking-heading: -0.035em;
  --ps-text-title: 700 28px/1.15 var(--ps-font-display);
  --ps-tracking-title: -0.02em;
  --ps-text-eyebrow: 700 14px/1.2 var(--ps-font-display);
  --ps-tracking-eyebrow: 0.14em;
  --ps-text-body: 500 18px/1.5 var(--ps-font-display);
  --ps-tracking-body: 0;
  --ps-text-small: 600 14px/1.4 var(--ps-font-display);
  --ps-tracking-small: 0;
  --ps-text-number: 800 clamp(64px, 12vw, 210px)/1 var(--ps-font-display);
  --ps-tracking-number: -0.05em;

  /* space */
  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 12px;
  --ps-space-4: 16px;
  --ps-space-5: 24px;
  --ps-space-6: 32px;
  --ps-space-7: 48px;
  --ps-space-8: 64px;
  --ps-space-9: 96px;
  --ps-space-10: 128px;

  /* shape */
  --ps-radius-none: 0;
  --ps-radius-arch: 9999px 9999px 0 0;
  --ps-radius-round: 50%;
  --ps-radius-stem: 4px 10px 6px 14px;
  --ps-shadow-hard: 10px 10px 0 #171513;
  --ps-shadow-hard-sm: 6px 6px 0 #171513;
  --ps-shadow-hard-on-dark: 10px 10px 0 #F1E8D6;
  --ps-bar: 22px;
  --ps-bar-sm: 8px;

  /* motion */
  --ps-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ps-ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  --ps-ease-drop: cubic-bezier(0.11, 0, 0.5, 0);
  --ps-dur-fast: 300ms;
  --ps-dur-base: 450ms;
  --ps-dur-slow: 700ms;
  --ps-dur-wipe: 550ms;

  /* semantic aliases used by app.css */
  --page: var(--ps-cream);
  --ink: var(--ps-black);
  --ink-soft: #4A443D; /* secondary text on cream: 8.6:1 */
  --paper-raised: #F7F1E4; /* card face on cream */
  --line: var(--ps-black);
  /* Clickable things: the ochre of the logo's ".pl", always with black text on it (about
     9:1). Ochre lines on cream are too faint for a control's outline (about 2:1, under the 3:1
     WCAG asks of UI parts), so outlines stay ink and the ochre fills: hovered, chosen, pressed.
     Links in text are ink with an ochre underline; the focus ring is ink. */
  --action: var(--ps-ochre);
  --on-action: var(--ps-black);
  --action-line: var(--ps-black);
  --link: var(--ps-black);
  --focus: var(--ps-black);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}