/**
 * Sumi & Kin design tokens.
 *
 * Single source of truth for the palette, type scale and spacing. Values are
 * mirrored into theme.json so the block editor offers the same palette and
 * nothing off-brand can be picked.
 *
 * Naming follows the handoff's roles, not the mockups' variable names: the
 * mockups still carry --navy and --red from the superseded "Bold & Dynamic"
 * palette, aliased to ink and gold values. Those aliases are not reproduced
 * here — a variable called --red holding a gold is a trap for the next person.
 */

:root {
	/* --- Ink ------------------------------------------------------------- */
	--sk-sumi: #101010;          /* Dark panels, footer, topbar */
	--sk-sumi-2: #1a1a1a;        /* Raised dark surfaces */
	--sk-ink: #161616;           /* Headings, primary body text */
	--sk-ink-ghost: #3a3a3a;     /* Ghost-button border and text */
	--sk-text-dim: #68635a;      /* Secondary and muted text */

	/* --- Kin (gold) ------------------------------------------------------ */
	--sk-kin: #bf9933;           /* Primary button fill, solid CTA */
	--sk-kin-2: #a9822f;         /* Gradient partner, accent on dark */

	/*
	 * Text-only gold, for gold type on a light ground.
	 *
	 * The fill gold #a9822f is 3.12:1 on cream and fails AA at body size, so
	 * accent text uses a deeper cut: 4.87:1 on cream, 5.55:1 on white. It is
	 * only ever a text colour — fills, borders and gold-on-dark keep --sk-kin
	 * and --sk-kin-2, which already pass.
	 */
	--sk-kin-text: #846320;

	/* --- Grounds --------------------------------------------------------- */
	--sk-bg: #ffffff;
	--sk-bg-alt: #f3f0e9;        /* Hero wash, alternating sections */
	--sk-bg-soft: #f7f4ec;
	--sk-card: #ffffff;
	--sk-line: #e7e3d6;          /* Hairline borders and dividers */
	--sk-line-strong: #68635a;   /* Form-field borders: 1.4.11 needs 3:1 */

	/* On dark grounds */
	--sk-on-dark: #ddd8ce;
	--sk-on-dark-dim: #b3aca1;
	--sk-on-dark-line: #35322f;

	/* --- Type ------------------------------------------------------------ */
	--sk-font-display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
	--sk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--sk-text-xs: 0.75rem;       /* 12px */
	--sk-text-sm: 0.8125rem;     /* 13px */
	--sk-text-base: 0.875rem;    /* 14px */
	--sk-text-md: 1rem;          /* 16px */
	--sk-text-lg: 1.125rem;      /* 18px */
	--sk-text-h3: 1.1875rem;     /* 19px */
	--sk-text-h2: 2rem;          /* 32px */
	--sk-text-h1: 2.75rem;       /* 44px */

	/* --- Space, shape, motion -------------------------------------------- */
	--sk-radius: 14px;
	--sk-radius-sm: 10px;
	--sk-radius-pill: 999px;
	--sk-maxw: 1200px;
	--sk-gutter: 24px;
	--sk-section-y: 80px;

	--sk-shadow-card: 0 4px 16px rgba(16, 16, 16, 0.05);
	--sk-shadow-raised: 0 14px 32px rgba(16, 16, 16, 0.14);
	--sk-shadow-gold: 0 8px 24px rgba(191, 153, 51, 0.25);

	--sk-transition: 0.2s ease;

	/* Focus ring. 3:1 against both the light grounds and the gold fills. */
	--sk-focus: #101010;
	--sk-focus-offset: 2px;
}

@media (max-width: 720px) {
	:root {
		--sk-text-h1: 1.875rem;  /* 30px */
		--sk-section-y: 56px;
	}
}