/* 01-tokens-and-reset.css — the :root colour, font-family and easing tokens, then
   the element reset (body, a, button, img). Type sizes, spacing and --header-h are
   in css/tokens.css, which every page links before these files. */

/* TOKENS */
/* All px-based tokens converted to rem (1rem = 16px). */
:root {
  /* colour — dark-first */
  --bg: #111110;       --bg-raised: #181816;
  --ink: #E4E3DD;         --ink-soft: #AEADA6;
  --rule: #282826;        --rule-dark: #1A1A18;
  /* --muted is the faintest TEXT: 5.7:1 on --bg, over the 4.5:1 small type needs
     (#686862 was 3.4:1) — the grey /op already calls --dim. --muted-dark, 3.7:1
     (over the 3:1 a control's edge needs), draws the form's underlines and the
     KO / EN slash; never words. Decorative hairlines stay --rule. */
  --muted: #8F8D85;       --muted-dark: #6F6E68;
  /* Electric blue, not pure #0000FF. Pure blue carries almost none of its
     brightness in the channels the eye is sensitive to, so on this near-black
     ground it went muddy and sat at 2.2:1 against the page — unreadable as the
     small type it marks (the featured counter, the active card number). Lifting
     the red and green channels keeps it unmistakably blue while making it
     sharper on screen, and takes it to 3.6:1. */
  --accent: #2D5BFF;      --accent-dim: rgba(45,91,255,0.12);
  --hero-bg: #111110;          /* the hero's ground, behind the 3D backdrop */
  --required: #0A84FF;         /* required-field asterisk — blue, bright enough to read on the near-black ground */

  /* type families — the Latin face first, 210 MGothic (Adobe Fonts kit) second.
     Jost and Space Mono carry no Hangul, so the browser falls back
     glyph by glyph: Latin stays in the Latin face, every Korean character is
     set in MGothic. Same result as the old unicode-range trick, but MGothic is
     served by Adobe and its @font-face cannot be given a unicode-range. */
  --ko:      'mgothic-210';
  --display: 'Jost', var(--ko), 'Futura', 'Avenir Next', sans-serif;   /* headings, hero, titles */
  --sans:    'Space Mono', var(--ko), 'Courier New', monospace;       /* UI, labels, body copy */

  /* type sizes, spacing and the header height: css/tokens.css */

  /* easing */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* our components set their own display (flex/grid), which would otherwise beat
   the UA rule for [hidden] and leave "hidden" blocks on screen */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.is-menu-open { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.35;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 280ms var(--ease-out);
}
a:hover { opacity: 0.6; }

/* The header email now jumps to the home contact section (see index.html /
   the page generators) — land the section below the fixed header, not under it. */
#contact { scroll-margin-top: var(--header-h); }

button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

img { display: block; max-width: 100%; height: auto; }
ul  { list-style: none; }