/* Kapono Design — design tokens.
 *
 * Kapono Design Group LLC designs, builds, and implements technology solutions
 * for professionals in real estate, agriculture, finance, and legal. The identity
 * is engineered and premium: Pacific Navy as the anchor, Precision Teal as the
 * single accent, cool slate neutrals, mono for anything a client could cite back.
 *
 * Values are the brand guidelines (kapono_brand_guidelines_concept2.pdf) and the
 * design system at /tokens. Variable NAMES are unchanged from the previous file so
 * assets/css/main.css keeps working without edits.
 */

:root {
	/* ---- Precision Teal: the single accent, and a FILL colour only. #0D9488 is
	   3.3:1 on white, so it never sets text there: data text uses teal-700
	   (5.4:1) at every size, and teal-300 on navy. Do not switch teals by font
	   size — that is a rule nobody follows. ---- */
	--kd-teal-050: #F0FDFA;
	--kd-teal-100: #CCFBF1;
	--kd-teal-200: #99F6E4;
	--kd-teal-300: #2DD4BF;   /* the inverse-arc teal; use ON navy only. */
	--kd-teal-400: #14B8A6;
	--kd-teal-500: #0D9488;   /* Precision Teal — the brand accent. */
	--kd-teal-600: #0B7A70;
	--kd-teal-700: #0A5F5C;   /* data text on white — 5.4:1 */
	--kd-teal-800: #08443F;

	/* ---- Slate: ink, rules, dark bands. Cool, never warm. slate-900 is
	   Pacific Navy — the brand anchor, and never pure black. ---- */
	--kd-slate-050: #F1F5F9;  /* Platinum Mist */
	--kd-slate-100: #ECEFF3;
	--kd-slate-200: #E2E8F0;
	--kd-slate-300: #CBD5E1;
	--kd-slate-400: #94A3B8;
	--kd-slate-500: #64748B;
	--kd-slate-600: #475569;
	--kd-slate-700: #334155;  /* Cool Charcoal — body copy */
	--kd-slate-800: #1E293B;
	--kd-slate-900: #0A192F;  /* Pacific Navy */
	--kd-white: #FFFFFF;      /* Pure Chalk */

	/* Slate Blue #1E3A5F — structural blue, link colour, the logo's outer arcs. */
	--kd-blue-400: #5B8AB8;
	--kd-blue-500: #2A5484;
	--kd-blue-600: #1E3A5F;
	--kd-blue-700: #12283F;
	--kd-blue-050: #EEF3F9;

	/* ---- Signals: semantic only. Never picked for variety. ---- */
	--kd-success: #15803D;
	--kd-success-soft: #DCFCE7;
	--kd-warn: #A16207;
	--kd-warn-soft: #FEF3C7;
	--kd-error: #B4231B;
	--kd-error-soft: #FEE4E2;
	--kd-info: #1E3A5F;
	--kd-info-soft: #EEF3F9;

	/* ---- Semantic aliases: components read these, not the ramps. ---- */
	--text-strong: var(--kd-slate-900);
	--text-body: var(--kd-slate-700);
	--text-muted: var(--kd-slate-500);
	--text-inverse: var(--kd-white);
	--text-brand: var(--kd-blue-600);
	--text-link: var(--kd-blue-600);
	--text-link-hover: var(--kd-teal-600);
	--text-heading-3: var(--kd-blue-600);
	--text-data: var(--kd-teal-700);
	--text-data-sm: var(--text-muted);
	--text-data-inverse: var(--kd-teal-300);

	--surface-page: var(--kd-white);
	--surface-sunken: var(--kd-slate-050);
	--surface-card: var(--kd-white);
	--surface-dark: var(--kd-slate-900);
	--surface-brand: var(--kd-teal-500);
	--surface-brand-soft: var(--kd-teal-050);

	--border-hairline: var(--kd-slate-200);
	--border-default: var(--kd-slate-300);
	--border-brand: var(--kd-teal-500);

	/* Accent = Precision Teal: eyebrow rules, meters, focus, active states. */
	--accent-primary: var(--kd-teal-500);
	--accent-primary-hover: var(--kd-teal-600);
	--accent-primary-press: var(--kd-teal-700);
	--accent-contrast: var(--kd-white);

	/* Action = Pacific Navy: the committed button. Teal is an accent, not a CTA
	   fill — this is the one place the previous file and the brand disagreed. */
	--action-primary: var(--kd-slate-900);
	--action-primary-hover: var(--kd-blue-600);
	--action-primary-press: #06101F;
	--action-contrast: var(--kd-white);

	/* ---- Type: Inter for everything typographic, JetBrains Mono for data.
	   "Inter Display" is Inter's display optical size (opsz axis), not a separate
	   family — headings set opsz 32. Suisse Int'l is the spec's named alternative
	   for interface/body; licensed, so not bundled. ---- */
	--font-display: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-mono: "JetBrains Mono", "Courier New", Courier, monospace;
	--opsz-display: 32;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Per-role weights, so a heading is never guessed at. */
	--fw-h1: 600;
	--fw-h2: 500;
	--fw-h3: 500;

	--type-display-1: clamp(36px, 4.6vw, 64px); --type-display-1-lh: 1.1; --type-display-1-ls: -0.02em;
	--type-display-2: clamp(34px, 3.4vw, 48px); --type-display-2-lh: 1.1; --type-display-2-ls: -0.02em;
	--type-h1: 48px; --type-h1-lh: 1.1; --type-h1-ls: -0.02em;
	--type-h2: 32px; --type-h2-lh: 1.2; --type-h2-ls: -0.01em;
	--type-h3: 20px; --type-h3-lh: 1.3; --type-h3-ls: 0em;
	--type-h4: 16px; --type-h4-lh: 1.35;
	--type-lead: 18px; --type-lead-lh: 1.6;
	--type-body: 16px; --type-body-lh: 1.6;
	--type-body-sm: 13px; --type-body-sm-lh: 1.4; --type-body-sm-ls: 0.01em;
	--type-caption: 13px;
	--type-eyebrow: 11px; --type-eyebrow-ls: 0.14em;
	--type-mono: 14px; --type-mono-lh: 1.4; --type-mono-ls: 0.02em;
	--type-metric: 44px;
	--type-wordmark-ls: -0.0147em;
	--type-tagline-ls: 0.103em;

	/* ---- Spacing: 8pt grid. --space-1 (4px) exists only for gaps inside a
	   control; every margin, padding and gap in a layout is a multiple of 8. ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;
	--space-32: 128px;

	--container: 1200px;
	--measure: 720px;
	--gutter: 24px;

	/* ---- Radius: controls are 5px. Pills only for badges and meters. ---- */
	--radius-chip: 3px;
	--radius-control: 5px;
	--radius-tile: 8px;
	--radius-card: 12px;
	--radius-panel: 18px;
	--radius-pill: 999px;

	/* ---- Elevation: cool navy tint, low spread. No glows, and never on the
	   logo — the guidelines forbid it. ---- */
	--shadow-1: 0 1px 1px rgba(10, 25, 47, .05);
	--shadow-2: 0 1px 2px rgba(10, 25, 47, .06), 0 1px 1px rgba(10, 25, 47, .04);
	--shadow-3: 0 6px 16px -6px rgba(10, 25, 47, .14), 0 2px 4px rgba(10, 25, 47, .05);
	--shadow-4: 0 18px 40px -14px rgba(10, 25, 47, .22), 0 4px 8px rgba(10, 25, 47, .05);
	--shadow-focus: 0 0 0 3px rgba(13, 148, 136, .30);

	/* ---- Motion: fast, small, eased. No bounce. ---- */
	--ease-standard: cubic-bezier(.2, 0, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--dur-press: 90ms;
	--dur-hover: 140ms;
	--dur-dialog: 200ms;
	--dur-meter: 340ms;
	--dur-reveal: 600ms;

	/* ---- Scrims: the only gradients in the system. ---- */
	--scrim-bottom: linear-gradient(to top, rgba(10,25,47,.86) 0%, rgba(10,25,47,.58) 38%, rgba(10,25,47,0) 100%);
	--scrim-left: linear-gradient(to right, rgba(10,25,47,.92) 0%, rgba(10,25,47,.70) 42%, rgba(10,25,47,.22) 78%, rgba(10,25,47,.05) 100%);

	/* ---- Hairline grid: the only background pattern in the brand. ---- */
	--grid-line: rgba(10, 25, 47, .07);
	--grid-line-inverse: rgba(255, 255, 255, .07);
}

/* Astra's own base stylesheet reads these to pad every direct-child
   group/cover/columns block of .entry-content (100px/80px, meant for a
   generic "page builder" look and left at Astra's defaults because this
   theme never set them). That stacks ~200px of dead space between every
   section on a single long page like Home, on top of this system's own
   blockGap/section spacing — the redesign's rhythm is owned here, not by
   Astra's block-padding feature, so it is zeroed rather than fought
   per-block. Must load after astra-theme-css (it does — kdc-tokens
   declares that dependency in functions.php) so this wins on source order. */
:root {
	--wp--custom--ast-default-block-top-padding: 0px;
	--wp--custom--ast-default-block-right-padding: 0px;
	--wp--custom--ast-default-block-bottom-padding: 0px;
	--wp--custom--ast-default-block-left-padding: 0px;
}