/**
 * Design tokens — electric blue / ink, flat and rounded.
 *
 * Brand: --sk-electric (#4af7ff) leading, --sk-ink (#001618) as substrate.
 *
 * The critical constraint, measured: #4af7ff on white is 1.31:1. That is not a
 * preference, it is unreadable — so the electric blue is never text or a link
 * colour on a light surface. It leads as a *surface*: the header, the section
 * bands, every button fill. Ink sits on it at 14.22:1.
 *
 * Where an interactive *text* colour is needed on white, --sk-link (#006063,
 * 7.36:1) stands in. That value comes from the Claude Design logo sheet.
 *
 * Contrast ledger (WCAG 2.1, all AAA unless noted):
 *   ink on white .................. 18.62:1
 *   ink on electric ............... 14.22:1
 *   electric on ink ............... 14.22:1
 *   link on white .................  7.36:1
 *   body-muted on white ...........  8.61:1
 *   electric on white .............  1.31:1  ← FORBIDDEN, never use
 *
 * Shape language: no shadows anywhere. Depth comes from solid ink strokes and
 * generous corner radii. The only motion permitted is image zoom on hover —
 * no lifts, no translations, no shadow transitions.
 */

/*
 * Astra ships `html { font-size: 112.5% }`, i.e. an 18px root, which silently
 * multiplied every rem token below by 1.125 — the documented "24px" heading
 * rendered at 27px and body copy at 20.25px. That is why the desktop type read
 * oversized while the ramp looked correct in source.
 *
 * Normalising to 100% makes 1rem equal the reader's own base size (16px by
 * default), so the px annotations below are true and user font-size preferences
 * are still respected. This must stay ahead of the token block.
 */
html {
	font-size: 100%;
}

:root {
	/* ---- Brand -------------------------------------------------------- */
	--sk-electric: #4af7ff;
	--sk-electric-soft: #7df9ff;
	--sk-electric-wash: #e8feff;
	--sk-ink: #001618;
	--sk-teal: #00a4ab;
	--sk-teal-deep: #00868b;
	--sk-link: #006063;
	--sk-link-hover: #00393c;

	/* ---- Surfaces ------------------------------------------------------ */
	--sk-surface: #ffffff;
	--sk-surface-bg: #f7fafa;
	--sk-surface-low: #eef4f4;
	--sk-surface-container: #e3eded;
	--sk-surface-high: #d6e4e5;

	/* ---- Content ------------------------------------------------------- */
	--sk-on-surface: var(--sk-ink);
	--sk-on-surface-variant: #3d4f52;   /* 8.61:1 on white */
	--sk-on-dark: #ffffff;
	--sk-on-dark-variant: #b9cfd1;
	--sk-outline: #7d9295;
	--sk-outline-variant: #cddadb;

	/*
	 * Category chips are brand-only. They previously rotated through amber,
	 * rose and lilac to separate adjacent cards, which read as four unrelated
	 * palettes across a grid. One brand chip is used everywhere instead.
	 */
	--sk-chip-bg: var(--sk-electric-wash);
	--sk-chip-fg: #00494c;

	--sk-error: #ba1a1a;
	--sk-success: #0f7a5a;

	/* ==================================================================
	 * Typography — one ramp, used everywhere
	 *
	 * Every font-size in this theme resolves to one of these nine steps.
	 * No component sets a raw px or rem value; that is what made the old
	 * sizing look arbitrary. Line-heights are paired with each step and are
	 * deliberately loose — Vietnamese stacks two diacritics high ("ế", "ữ",
	 * "ỗ") and tight leading collides them.
	 * ================================================================== */
	--sk-font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--sk-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--sk-text-xs: 0.75rem;      /* 12 — captions, meta, counts */
	--sk-text-xs-lh: 1.45;
	--sk-text-sm: 0.875rem;     /* 14 — labels, nav, buttons, small body */
	--sk-text-sm-lh: 1.5;
	--sk-text-base: 1rem;       /* 16 — default body */
	--sk-text-base-lh: 1.65;
	--sk-text-md: 1.0625rem;    /* 17 — article body, lead paragraphs */
	--sk-text-md-lh: 1.7;
	--sk-text-lg: 1.125rem;     /* 18 — card titles, h4 */
	--sk-text-lg-lh: 1.45;
	--sk-text-xl: 1.25rem;      /* 20 — h3, snippet titles */
	--sk-text-xl-lh: 1.4;
	--sk-text-2xl: 1.5rem;      /* 24 — h2, section headings */
	--sk-text-2xl-lh: 1.33;
	--sk-text-3xl: 1.875rem;    /* 30 — h1, article title */
	--sk-text-3xl-lh: 1.25;
	--sk-text-4xl: 2.25rem;     /* 36 — homepage hero only */
	--sk-text-4xl-lh: 1.2;

	--sk-tracking-tight: -0.02em;
	--sk-tracking-wide: 0.05em;
	--sk-tracking-caps: 0.12em;

	/* ---- Spacing — 8px rhythm ------------------------------------------ */
	--sk-1: 8px;
	--sk-2: 16px;
	--sk-3: 24px;
	--sk-4: 32px;
	--sk-6: 48px;
	--sk-8: 64px;
	--sk-10: 80px;

	--sk-container: 1280px;
	--sk-margin-mobile: 16px;
	--sk-margin-desktop: 40px;
	--sk-section-y: 80px;

	/* ==================================================================
	 * Shape — rounded, with solid strokes instead of shadows
	 * ================================================================== */
	--sk-radius-sm: 10px;    /* chips, small controls */
	--sk-radius: 14px;       /* buttons, inputs, tiles */
	--sk-radius-md: 20px;    /* cards */
	--sk-radius-lg: 28px;    /* panels, feature cards */
	--sk-radius-full: 9999px;

	/* The stroke *is* the elevation. */
	--sk-stroke-w: 2px;
	--sk-stroke: var(--sk-stroke-w) solid var(--sk-ink);
	--sk-stroke-soft: 1px solid var(--sk-outline-variant);

	--sk-focus: 0 0 0 3px rgba(0, 96, 99, 0.35);

	--sk-transition: 200ms ease;
}

/*
 * Phone ramp — only the display steps come down.
 *
 * The gap between the two ramps is deliberately narrow. An earlier version
 * dropped body copy to 16px and headings to 28/24/20, which read as too small
 * on a phone while the desktop steps above were simultaneously too large; the
 * two ends have been moved toward each other rather than further apart. Body
 * copy stays at 17px on every screen — it is the same reading task either way.
 */
@media (max-width: 782px) {
	:root {
		--sk-text-4xl: 1.75rem;    /* 28 */
		--sk-text-3xl: 1.625rem;   /* 26 */
		--sk-text-2xl: 1.4375rem;  /* 23 */
		--sk-text-xl: 1.3125rem;   /* 21 — snippet titles read small on a phone */
		--sk-text-lg: 1.1875rem;   /* 19 */
		--sk-text-md: 1.1875rem;   /* 19 — article body */
		--sk-section-y: 48px;
	}
}