/* ============================================================
   Retro Game Guides — Field Manual tokens
   The app's visual system: a technical field guide. Paper, ink and
   rules; `marker` is only ever yours, `caution` only ever the guide's.
   Source of truth for colour, type, spacing, strokes, sizes and motion.
   The `FM*` Swift files mirror these values;
   `scripts/lint_design_tokens.py` checks them.
   ============================================================ */

:root {
	/* ---------- Colour: Day ---------- */
	--fm-field:          #F3F3EF;  /* behind lists and bars; never behind long prose */
	--fm-page:           #FFFFFF;  /* reading surface, panels, header bars, figure paper */
	--fm-sunken:         #E6E6E0;  /* inactive tabs, your notes, progress tracks, title cards */
	--fm-grid:           #ECECE6;  /* 8 pt figure grid only; decorative */
	--fm-rule:           #CDCDC6;  /* hairlines between rows; decorative */
	--fm-rule-strong:    #8A8B85;  /* borders that must be seen; cover frames */
	--fm-ink:            #1A1A18;  /* primary text, icons, structural rules; 17.4:1 on page */
	--fm-steel:          #55575A;  /* secondary text, labels, inactive tabs; 7.3:1 on page */
	--fm-fill-strong:    #1A1A18;  /* primary button, current tab, selected segment, edition strip */
	--fm-on-fill-strong: #FFFFFF;
	--fm-swipe-strong:   #1A1A18;  /* Remove swipe action; iOS sets its label white in both themes */
	--fm-swipe:          #55575A;  /* other swipe actions; white label 7.3:1 */
	--fm-marker:         #F7DC5C;  /* yours in a guide: your marks and your place, nothing else */
	--fm-on-marker:      #1A1A18;  /* 12.7:1 on marker */
	--fm-marker-edge:    #8A6D00;  /* 2 pt underline under a highlight */
	--fm-caution:        #B8381A;  /* the guide's warnings only; never on marker */
	--fm-focus:          #1A1A18;  /* focus ring, ink in both themes */

	/* ---------- Type families (bundled; SIL Open Font License) ---------- */
	--fm-font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;  /* structure: titles, labels, metadata */
	--fm-font-text:    "Source Serif 4", Georgia, serif;                  /* guide prose and titles */
	--fm-font-mono:    "Source Code Pro", ui-monospace, Menlo, monospace; /* the guide's fixed-width text */

	/* Archivo width axis */
	--fm-wdth-heading: 78;
	--fm-wdth-label:   80;
	--fm-wdth-normal:  100;
	--fm-wdth-narrow:  62;   /* title cards only */

	/* ---------- Type scale (size / line height) ----------
	   Each style's weight, width, tracking, case and Dynamic Type mapping is
	   in its `.fm-*` class below. */
	--fm-fs-display:        40px;  --fm-lh-display:        40px;
	--fm-fs-section-number: 30px;  --fm-lh-section-number: 30px;
	--fm-fs-heading:        20px;  --fm-lh-heading:        22px;
	--fm-fs-heading-sm:     17px;  --fm-lh-heading-sm:     20px;
	--fm-fs-label:          13px;  --fm-lh-label:          16px;
	--fm-fs-label-sm:       11px;  --fm-lh-label-sm:       14px;
	--fm-fs-meta:           13px;  --fm-lh-meta:           18px;
	--fm-fs-body:           17px;  --fm-lh-body:           27px;
	--fm-fs-body-strong:    17px;  --fm-lh-body-strong:    24px;
	--fm-fs-title:          20px;  --fm-lh-title:          24px;
	--fm-fs-game-title:     24px;  --fm-lh-game-title:     28px;  /* the game's name on its Game page */
	--fm-fs-callout:        16px;  --fm-lh-callout:        24px;
	--fm-fs-figure:         12px;  --fm-lh-figure:         16px;  /* never below 11 */
	--fm-fs-figure-sm:      11px;  --fm-lh-figure-sm:      15px;  /* floor size */
	--fm-fs-title-card:     11px;  --fm-lh-title-card:     13px;  /* a game's title in a 48–72 pt card */

	--fm-tracking-display:    0.01em;
	--fm-tracking-label:      0.05em;
	--fm-tracking-title-card: 0.02em;

	/* ---------- Spacing ---------- */
	--fm-space-1: 4px;
	--fm-space-2: 8px;
	--fm-space-3: 12px;
	--fm-space-4: 16px;   /* screen side margin */
	--fm-space-5: 24px;
	--fm-space-6: 32px;
	--fm-gutter-paragraph: 36px;  /* number column in Contents */
	--fm-thumb-index-width: 30px;
	--fm-target-min: 44px;

	/* ---------- Strokes and corners ---------- */
	--fm-stroke-hairline: 1px;
	--fm-stroke-rule:     1.5px;
	--fm-stroke-heavy:    2px;
	--fm-radius-square:   0px;
	--fm-focus-width:     2px;
	--fm-focus-offset:    2px;

	/* ---------- Component sizes ---------- */
	--fm-cover-slot:        48px;   /* guide rows and game heads */
	--fm-cover-slot-panel:  72px;   /* open-guide panel */
	--fm-cover-game-width:  150px;  /* Game page, own height */
	--fm-cover-game-max-h:  200px;
	--fm-row-contents-min:  52px;
	--fm-row-guide-min:     64px;
	--fm-row-game-head-min: 68px;
	--fm-tab-min:           52px;
	--fm-progress-cell-h:   8px;
	--fm-progress-cell-gap: 3px;
	--fm-progress-width:    84px;
	--fm-switch-w:          48px;
	--fm-switch-h:          28px;
	--fm-control-h:         36px;   /* segmented control, inside a 44 pt row */
	--fm-checkbox:          24px;   /* square selection box in multi-select rows */
	--fm-row-pad-y:         10px;   /* vertical padding in guide rows and game heads */
	--fm-strip-pad-y:       6px;    /* panel strips */
	--fm-stack-tight:       2px;    /* title over metadata */
	--fm-tab-gap:           3px;    /* tab icon to label */
	--fm-tab-bar-pad-x:     6px;
	--fm-reader-fs-min:     15px;   /* reader text size range (serif); fixed width keeps its own */
	--fm-reader-fs-default: 17px;
	--fm-reader-fs-max:     28px;
	--fm-reader-mono-fs-min:     8px;    /* fixed width keeps the original reader's range */
	--fm-reader-mono-fs-default: 12px;
	--fm-reader-mono-fs-max:     24px;
	--fm-reader-measure-max:     688px;  /* widest wrapped text column */
	--fm-reader-mono-line-height: 1.55;  /* line height multiple for fixed-width reading */
	--fm-reader-fixed-zoom-below: 8px;   /* a fixed-width block fitted smaller than this offers the full-screen view */

	/* ---------- Motion ---------- */
	--fm-dur-panel: 150ms;  /* panels and the reader header and footer; ease-out */
	--fm-dur-flash: 200ms;  /* marker flash on a jump target */
	--fm-dur-status: 2000ms; /* how long a confirmation line stays */
}

/* Night ops: a full theme, not an inversion. */
@media (prefers-color-scheme: dark) {
	:root {
		--fm-field:          #0F0F0F;
		--fm-page:           #161616;
		--fm-sunken:         #262624;
		--fm-grid:           #222220;
		--fm-rule:           #3A3A37;
		--fm-rule-strong:    #7A7A74;
		--fm-ink:            #EDEDE8;
		--fm-steel:          #A3A39C;
		--fm-fill-strong:    #EDEDE8;
		--fm-on-fill-strong: #161616;
		--fm-swipe-strong:   #62625D;  /* white label 6.1:1 */
		--fm-swipe:          #42423F;  /* white label 10:1 */
		--fm-marker:         #E8C94A;
		--fm-on-marker:      #161616;
		--fm-marker-edge:    #E8C94A;
		--fm-caution:        #F07A57;
		--fm-focus:          #EDEDE8;
	}
}

/* Increase Contrast: every hairline becomes a rule you can see. */
@media (prefers-contrast: more) {
	:root { --fm-rule: #8A8B85; }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
	:root { --fm-rule: #7A7A74; }
}

/* ---------- Field Manual element styles ---------- */
/* One class per FMTextStyle. `--fm-dynamic-type` is the iOS text style the size
   scales with, and `--fm-dynamic-type-max` caps it; the browser ignores both. */
.fm-display {
	font-family: var(--fm-font-display); font-weight: 700; font-variation-settings: "wdth" var(--fm-wdth-heading);
	font-size: var(--fm-fs-display); line-height: var(--fm-lh-display);
	letter-spacing: var(--fm-tracking-display); text-transform: uppercase; color: var(--fm-ink);
	--fm-dynamic-type: largeTitle;
}
.fm-section-number {
	font-family: var(--fm-font-display); font-weight: 700; font-variation-settings: "wdth" var(--fm-wdth-heading);
	font-size: var(--fm-fs-section-number); line-height: var(--fm-lh-section-number);
	font-variant-numeric: tabular-nums;
	--fm-dynamic-type: title1;
}
.fm-heading {
	font-family: var(--fm-font-display); font-weight: 700; font-variation-settings: "wdth" var(--fm-wdth-heading);
	font-size: var(--fm-fs-heading); line-height: var(--fm-lh-heading);
	letter-spacing: var(--fm-tracking-display); text-transform: uppercase; color: var(--fm-ink);
	--fm-dynamic-type: title3;
}
.fm-heading-sm {
	font-family: var(--fm-font-display); font-weight: 700; font-variation-settings: "wdth" var(--fm-wdth-heading);
	font-size: var(--fm-fs-heading-sm); line-height: var(--fm-lh-heading-sm);
	letter-spacing: var(--fm-tracking-display); text-transform: uppercase;
	--fm-dynamic-type: headline;
}
.fm-label {
	font-family: var(--fm-font-display); font-weight: 600; font-variation-settings: "wdth" var(--fm-wdth-label);
	font-size: var(--fm-fs-label); line-height: var(--fm-lh-label);
	letter-spacing: var(--fm-tracking-label); text-transform: uppercase; font-variant-numeric: tabular-nums;
	--fm-dynamic-type: footnote; --fm-dynamic-type-max: 22px;
}
.fm-label-sm {
	font-family: var(--fm-font-display); font-weight: 600; font-variation-settings: "wdth" var(--fm-wdth-label);
	font-size: var(--fm-fs-label-sm); line-height: var(--fm-lh-label-sm);
	letter-spacing: var(--fm-tracking-label); text-transform: uppercase; font-variant-numeric: tabular-nums;
	--fm-dynamic-type: caption2; --fm-dynamic-type-max: 19px;
}
.fm-meta {
	font-family: var(--fm-font-display); font-weight: 400; font-variation-settings: "wdth" var(--fm-wdth-normal);
	font-size: var(--fm-fs-meta); line-height: var(--fm-lh-meta); color: var(--fm-steel);
	--fm-dynamic-type: footnote;
}
.fm-body {
	font-family: var(--fm-font-text); font-weight: 400;
	font-size: var(--fm-fs-body); line-height: var(--fm-lh-body); color: var(--fm-ink);
	--fm-dynamic-type: body;
}
.fm-body-strong {
	font-family: var(--fm-font-text); font-weight: 600;
	font-size: var(--fm-fs-body-strong); line-height: var(--fm-lh-body-strong);
	--fm-dynamic-type: body;
}
.fm-title {
	font-family: var(--fm-font-text); font-weight: 600;
	font-size: var(--fm-fs-title); line-height: var(--fm-lh-title);
	--fm-dynamic-type: title3;
}
.fm-game-title {
	font-family: var(--fm-font-text); font-weight: 600;
	font-size: var(--fm-fs-game-title); line-height: var(--fm-lh-game-title);
	--fm-dynamic-type: title2;
}
.fm-callout {
	font-family: var(--fm-font-text); font-weight: 400;
	font-size: var(--fm-fs-callout); line-height: var(--fm-lh-callout);
	--fm-dynamic-type: callout;
}
.fm-figure {
	font-family: var(--fm-font-mono); font-weight: 400;
	font-size: var(--fm-fs-figure); line-height: var(--fm-lh-figure); white-space: pre; color: var(--fm-ink);
	--fm-dynamic-type: caption1;
}
.fm-figure-sm {
	font-family: var(--fm-font-mono); font-weight: 400;
	font-size: var(--fm-fs-figure-sm); line-height: var(--fm-lh-figure-sm); white-space: pre;
	--fm-dynamic-type: caption2;
}
.fm-title-card {
	font-family: var(--fm-font-display); font-weight: 700; font-variation-settings: "wdth" var(--fm-wdth-narrow);
	font-size: var(--fm-fs-title-card); line-height: var(--fm-lh-title-card);
	letter-spacing: var(--fm-tracking-title-card); text-transform: uppercase;
	--fm-dynamic-type: caption2; --fm-dynamic-type-max: 13px;
}