/* Gaki Games website tokens. Mirrors gaki-web.tokens.json. Load before css/gaki-web.css. */

@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 900; font-style: normal; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* colour: studio foundation */
  --gk-ink: #2B2A33;
  --gk-cream: #FFF8EC;
  --gk-cream-deep: #F2E6CE;
  --gk-ink-muted: #5A5764;
  --gk-cream-muted: #CFC7B8;
  --gk-hairline: #D9CDB7;

  /* colour: games (OVER! is the only approved game colour) */
  --gk-over: #FFD84D;
  --gk-tag-proposed: #37B9B1;
  --gk-mud-proposed: #A98BE8;
  --game-accent: var(--gk-ink);      /* each game area overrides this */
  --game-on-accent: var(--gk-cream);

  /* colour: status */
  --gk-error: #A8233F;
  --gk-error-on-ink: #FF9BB0;
  --gk-success: #1D6A47;

  /* type */
  --gk-font-headline: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gk-font-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gk-font-label: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;

  --gk-type-display: clamp(2.75rem, 1.4rem + 5.6vw, 6.75rem);
  --gk-type-h1: clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem);
  --gk-type-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.875rem);
  --gk-type-h3: 1.375rem;
  --gk-type-lead: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --gk-type-body: 1.0625rem;
  --gk-type-small: 0.9375rem;
  --gk-type-label: 1.0625rem;
  --gk-type-numeral: clamp(3rem, 2rem + 4vw, 5.5rem);

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

  /* layout */
  --gk-max: 1240px;
  --gk-gap: 24px;
  --gk-gutter: max(16px, env(safe-area-inset-left, 0px));
  --gk-measure: 64ch;

  /* radius */
  --gk-radius-control: 999px;
  --gk-radius-media: 24px;
  --gk-radius-icon: 22%;

  /* lines and shadows */
  --gk-court: 3px solid var(--gk-ink);
  --gk-keyline: 3px solid var(--gk-ink);
  --gk-hair: 1px solid var(--gk-hairline);
  --gk-shadow-press: 0 4px 0 var(--gk-ink);
  --gk-shadow-pressed: 0 1px 0 var(--gk-ink);
  --gk-shadow-media: 0 8px 0 var(--gk-ink);

  /* motion */
  --gk-dur-press: 90ms;
  --gk-dur-hover: 140ms;
  --gk-dur-hop: 560ms;
  --gk-ease-hop: cubic-bezier(.3, .8, .4, 1);
}

@media (min-width: 720px) { :root { --gk-gutter: 32px; } }
@media (min-width: 1100px) { :root { --gk-gutter: 48px; } }

/* game areas: set on <body> of a game page or on a game row */
[data-game="over"] { --game-accent: var(--gk-over); --game-on-accent: var(--gk-ink); }