/* GJY Games · design tokens (Hallmark custom theme, light)
 * vibe: "warm, clear, made by friends" · anchors: the logo's ink #1C1B19 and paper #F7F4EE, the banners' sunset gold
 * axes: light / modern-sans (serif for the game's name) / chromatic-amber ~72
 */
@font-face {
  font-family: "Geist";
  src: url("assets/geist-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("assets/geist-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("assets/geist-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pagella Display";
  src: url("assets/pagella-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* palette: the logo's off-white and ink, one sunset-gold accent */
  --color-paper:         oklch(96.8% 0.009 85);  /* = #F7F4EE, mirrored in the theme-color meta (HTML can't read CSS variables) */
  --color-paper-2:       oklch(94% 0.011 82);
  --color-surface:       oklch(99% 0.004 85);
  --color-rule:          oklch(87.5% 0.012 80);
  --color-muted:         oklch(50% 0.014 70);
  --color-ink-2:         oklch(34% 0.010 75);
  --color-ink:           oklch(22.2% 0.004 85);  /* = #1C1B19 */
  --color-ink-hover:     oklch(32% 0.006 85);
  --color-accent:        oklch(80% 0.13 72);     /* banner gold: button fills only */
  --color-accent-hover:  oklch(76% 0.135 70);
  --color-accent-ink:    oklch(22.2% 0.004 85);
  --color-accent-strong: oklch(52% 0.11 62);     /* gold for small text on paper */
  --color-focus:         oklch(51.5% 0.11 62);
  --color-on-ink:        oklch(96.8% 0.009 85);
  --color-on-ink-muted:  oklch(78% 0.010 80);
  --color-rule-on-ink:   oklch(36% 0.006 85);
  --color-shadow:        oklch(22.2% 0.004 85 / 0.14);
  --color-glass:         oklch(99% 0.004 85 / 0.82);

  /* type: Geist for everything we say, Pagella (the posters' serif) for the game's name and our vision */
  --font-display: "Geist", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-body:    "Geist", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-brand:   "Pagella Display", "TeX Gyre Pagella", "Palatino Linotype", Palatino, "Book Antiqua", serif;

  --text-xs:      0.8125rem;
  --text-sm:      0.9375rem;
  --text-base:    1.0625rem;
  --text-md:      1.25rem;
  --text-lg:      clamp(1.375rem, 0.6vw + 1.2rem, 1.625rem);
  --text-xl:      clamp(1.875rem, 2vw + 1.3rem, 2.75rem);
  --text-quote:   clamp(1.625rem, 1.6vw + 1.2rem, 2.375rem);
  --text-email:   clamp(1.25rem, 3.4vw + 0.5rem, 2.25rem);
  --text-brand:   clamp(2.25rem, 3vw + 1.2rem, 3.5rem);
  --text-display: clamp(2.375rem, 4.2vw + 1rem, 4.5rem);

  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-snug:    1.35;
  --lh-body:    1.6;
  --tracking-display: -0.032em;
  --tracking-heading: -0.02em;
  --tracking-brand:   0.01em;
  --measure: 62ch;

  /* 4-point spacing scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* layout */
  --container:  75rem;
  --gutter:     clamp(1rem, 4vw, 2.5rem);
  --split-gap:  clamp(2rem, 5vw, 5rem);
  --nav-clear:  5.5rem;
  --hit-target: 2.75rem;
  --logo-size:  2rem;

  /* rules, radii, shadows */
  --rule-hair: 1px;
  --rule-link: 1px;
  --rule-link-hover: 2px;
  --rule-link-offset: 2px;
  --rule-focus: 2px;
  --rule-focus-offset: 2px;
  --radius-pill:  999px;
  --radius-media: 1rem;
  --radius-logo:  0.4rem;
  --shadow-nav:   0 10px 30px -14px var(--color-shadow);
  --shadow-media: 0 1px 2px var(--color-shadow), 0 18px 40px -24px var(--color-shadow);

  /* motion: colour changes only */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;

  --z-nav: 20;
  --z-skip: 30;
}