/**
 * Church of Beer — design tokens.
 *
 * Ported from "Church of Beer — Design System". Tent revival meets taproom:
 * oak is the structure, parchment the ground, copper the action, gold is
 * reserved for giving. Fonts are loaded from Google Fonts (see
 * gpcob_enqueue_assets in functions.php) — swap for self-hosted files if
 * licensed originals are available.
 */

:root {
	/* --- Oak: the pew, the barrel, the ink ------------------------------ */
	--oak-950: #1C0F06;
	--oak-900: #2A170B;
	--oak-800: #3A2211;
	--oak-700: #4A2C17;
	--oak-600: #6B4426;
	--oak-500: #8C6240;
	--oak-400: #B08F6E;
	--oak-300: #CDB294;
	--oak-200: #E4D2B9;

	/* --- Parchment: cream grounds ---------------------------------------- */
	--parchment-50: #FEFAF1;
	--parchment-100: #FBF4E6;
	--parchment-200: #F3E3C3;
	--parchment-300: #E8D2A6;
	--parchment-400: #D9BC85;

	/* --- Copper: the primary action -------------------------------------- */
	--copper-700: #7E3719;
	--copper-600: #9A4523;
	--copper-500: #B4532A;
	--copper-400: #CC6A3E;
	--copper-300: #D97A4F;
	--copper-100: #F6DECF;

	/* --- Gold: the beer, the halo, the trim ------------------------------ */
	--gold-600: #C4821F;
	--gold-500: #E8A33D;
	--gold-400: #F2C46B;
	--gold-200: #FAE7BE;

	/* --- Stained glass: accents only -------------------------------------- */
	--ruby-600: #6F1524;
	--ruby-500: #8E1D2E;
	--ruby-200: #E9C4C9;
	--cobalt-600: #162C54;
	--cobalt-500: #1E3A6E;
	--cobalt-200: #C6D2E6;
	--verdant-600: #23543E;
	--verdant-500: #2F6B4F;
	--verdant-200: #C5DCD0;

	--white: #FFFFFF;

	/* --- Semantic: surfaces ------------------------------------------------ */
	--surface-page: var(--parchment-100);
	--surface-card: var(--parchment-50);
	--surface-raised: var(--white);
	--surface-sunken: var(--parchment-200);
	--surface-inverse: var(--oak-900);
	--surface-inverse-alt: var(--oak-800);
	--surface-accent: var(--copper-500);
	--surface-accent-soft: var(--copper-100);
	--surface-gold-soft: var(--gold-200);

	/* --- Semantic: ink ------------------------------------------------------ */
	--text-body: var(--oak-800);
	--text-heading: var(--oak-900);
	--text-muted: var(--oak-600);
	--text-faint: var(--oak-500);
	--text-on-dark: var(--parchment-100);
	--text-on-dark-muted: var(--oak-300);
	--text-on-accent: var(--parchment-50);
	--text-link: var(--copper-600);
	--text-link-hover: var(--copper-700);
	--text-scripture: var(--oak-700);

	/* --- Semantic: lines ---------------------------------------------------- */
	--border-hairline: var(--parchment-300);
	--border-default: var(--oak-300);
	--border-strong: var(--oak-700);
	--border-gold: var(--gold-500);
	--border-on-dark: rgba(243, 227, 195, .22);

	/* --- Semantic: status ---------------------------------------------------- */
	--status-success: var(--verdant-500);
	--status-success-soft: var(--verdant-200);
	--status-warning: var(--gold-600);
	--status-warning-soft: var(--gold-200);
	--status-danger: var(--ruby-500);
	--status-danger-soft: var(--ruby-200);
	--status-info: var(--cobalt-500);
	--status-info-soft: var(--cobalt-200);

	--focus-ring: var(--gold-500);

	/* --- Type: families ------------------------------------------------------ */
	--font-display: "Abril Fatface", Georgia, serif;          /* revival poster */
	--font-body: "Karla", "Helvetica Neue", Arial, sans-serif; /* everything else */
	--font-scripture: "EB Garamond", Georgia, serif;           /* verses, pull quotes */
	--font-mono: "Space Mono", ui-monospace, Menlo, monospace; /* ABV, gravity, times */

	/* size ramp — 1.25 major third off 16px */
	--text-2xs: 11px;
	--text-xs: 12px;
	--text-sm: 14px;
	--text-base: 16px;
	--text-lg: 18px;
	--text-xl: 22px;
	--text-2xl: 28px;
	--text-3xl: 36px;
	--text-4xl: 48px;
	--text-5xl: 64px;
	--text-6xl: 84px;
	--text-7xl: 112px;

	/* weights — Karla only; Abril has a single weight */
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-extrabold: 800;

	/* leading */
	--leading-tight: 0.94;
	--leading-snug: 1.12;
	--leading-heading: 1.18;
	--leading-normal: 1.5;
	--leading-relaxed: 1.65;

	/* tracking */
	--tracking-display: -0.02em;
	--tracking-normal: 0em;
	--tracking-wide: 0.04em;
	--tracking-eyebrow: 0.18em;
	--tracking-mono: 0.06em;

	/* composed roles */
	--type-hero: var(--weight-regular) var(--text-7xl)/var(--leading-tight) var(--font-display);
	--type-display: var(--weight-regular) var(--text-5xl)/var(--leading-tight) var(--font-display);
	--type-title: var(--weight-regular) var(--text-3xl)/var(--leading-heading) var(--font-display);
	--type-subtitle: var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-body);
	--type-body: var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-body);
	--type-body-sm: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
	--type-label: var(--weight-bold) var(--text-xs)/1.2 var(--font-body);
	--type-scripture: italic var(--weight-regular) var(--text-xl)/var(--leading-relaxed) var(--font-scripture);
	--type-mono: var(--weight-regular) var(--text-xs)/1.3 var(--font-mono);

	/* --- Space --------------------------------------------------------------- */
	--space-0: 0px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-32: 128px;

	--gutter-inline: 24px;      /* page side padding, mobile */
	--gutter-inline-lg: 64px;   /* page side padding, desktop */
	--section-y: 96px;          /* vertical rhythm between marketing sections */
	--section-y-sm: 56px;
	--stack-tight: 8px;
	--stack: 16px;
	--stack-loose: 32px;
	--measure: 62ch;            /* body copy max line length */
	--container: 1200px;
	--container-narrow: 760px;

	/* --- Radii — mostly restrained; the ARCH is the brand shape --------------- */
	--radius-none: 0px;
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-xl: 22px;
	--radius-pill: 999px;
	--radius-arch: 50% 50% var(--radius-sm) var(--radius-sm) / 34% 34% var(--radius-sm) var(--radius-sm);

	/* borders */
	--border-width: 1px;
	--border-width-thick: 2px;
	--border-width-rule: 3px;

	/* shadows — warm brown, never neutral grey */
	--shadow-xs: 0 1px 2px rgba(42, 23, 11, .10);
	--shadow-sm: 0 2px 6px rgba(42, 23, 11, .12);
	--shadow-md: 0 6px 18px rgba(42, 23, 11, .14);
	--shadow-lg: 0 18px 44px rgba(42, 23, 11, .18);
	--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .55);
	--shadow-press: inset 0 2px 4px rgba(42, 23, 11, .28);
	--shadow-halo: 0 0 0 6px rgba(232, 163, 61, .28);

	/* motion */
	--ease-standard: cubic-bezier(.2, .6, .3, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in: cubic-bezier(.6, 0, .9, .3);
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--duration-slow: 420ms;
	--transition-control: background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);

	/* brand grounds */
	--gradient-altar: linear-gradient(180deg, var(--gold-400) 0%, var(--copper-500) 58%, var(--oak-800) 100%);
	--gradient-pour: linear-gradient(180deg, var(--gold-200) 0%, var(--gold-500) 100%);
	--gradient-protect: linear-gradient(180deg, rgba(28, 15, 6, 0) 0%, rgba(28, 15, 6, .78) 100%);
	--texture-rays: repeating-conic-gradient(from 0deg at 50% 100%, rgba(232, 163, 61, .16) 0deg 4deg, rgba(232, 163, 61, 0) 4deg 11deg);
	--texture-linen: repeating-linear-gradient(45deg, rgba(74, 44, 23, .035) 0 2px, transparent 2px 5px);

	--focus-outline: 2px solid var(--focus-ring);
	--focus-offset: 2px;

	/* legacy aliases used by the churchofbeer plugin's markup, mapped onto the tokens above */
	--cob-color-text: var(--text-body);
	--cob-color-text-muted: var(--text-muted);
	--cob-color-background: var(--surface-page);
	--cob-color-surface: var(--surface-card);
	--cob-color-border: var(--border-hairline);
	--cob-color-accent: var(--copper-500);
	--cob-color-accent-contrast: var(--text-on-accent);
	--cob-color-link: var(--text-link);
	--cob-color-error: var(--status-danger);
	--cob-color-error-background: var(--status-danger-soft);
	--cob-color-success: var(--status-success);
	--cob-color-success-background: var(--status-success-soft);
	--cob-font-body: var(--font-body);
	--cob-font-mono: var(--font-mono);
	--cob-space-xs: var(--space-1);
	--cob-space-sm: var(--space-2);
	--cob-space-md: var(--space-4);
	--cob-space-lg: var(--space-6);
	--cob-space-xl: var(--space-10);
	--cob-radius: var(--radius-sm);
	--cob-max-width: var(--container-narrow);
}