/*
Theme Name: Keelbase
Theme URI: https://keelbase.com.au
Author: Wilier Labs
Author URI: https://keelbase.com.au
Description: The Keelbase studio theme — a hand-authored classic WordPress theme for keelbase.com.au. Bone-forward editorial world with the abyss used as punctuation, the keel line as the single accent and the only orange on the page, Bricolage Grotesque and Inter Tight self-hosted, no build step and no external requests.
Version: 3.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keelbase
Tags: business, one-column, custom-menu, editor-style, translation-ready, accessibility-ready
*/

/* -----------------------------------------------------------------------------
 * Design tokens.
 *
 * Single source of truth for the theme, mirrored into the block editor by
 * theme.json. Change a value in both files or in neither.
 *
 * The world is bone-forward. Warm bone is the default field for the whole site:
 * light, editorial, readable. The abyss is punctuation — it appears on a small
 * number of bands (the featured-work plate, the close and the footer) and
 * nowhere else, so arriving on one means something.
 *
 * There is exactly one accent colour, and it has exactly one job. Signal orange
 * is the keel: the rail at the viewport edge, the line that draws across the
 * hero, the thread down the page, the node ticks and the logomark. It is not a
 * button, an eyebrow, a tag, a stat rule, a tint or a focus ring. When the only
 * orange on the page is the keel, the keel means something.
 * -------------------------------------------------------------------------- */

:root {
	/* --- Bone: the default field ---------------------------------------- */
	--kb-bone: #f4f0e7; /* base surface for nearly the whole site */
	--kb-bone-raised: #ece7db; /* the sand band, and cards on bone */
	--kb-bone-sunk: #e2dbcb; /* wells inside a sand band */

	/* --- Abyss: the punctuation ----------------------------------------- */
	--kb-abyss: #061311; /* the work plate, the close, the footer */
	--kb-harbour: #0c2421; /* raised cards on the abyss */

	/* --- Text ------------------------------------------------------------ */
	--kb-ink: #14100b; /* primary text on bone — 15.6:1 */
	--kb-muted-bone: #5c5a52; /* secondary text on bone — 6.1:1 */
	--kb-white: #f8faf5; /* primary text on abyss — 18:1 */
	--kb-muted-dark: #9fb0aa; /* secondary text on abyss — 8.4:1 */

	/* --- The keel -------------------------------------------------------- */
	--kb-keel: #ff6a1b; /* the one accent, and the one job it has */

	/*
	 * Retained only to mirror the editor palette in theme.json, where an author
	 * writing post content can still reach a warm accent. Nothing in the theme's
	 * own CSS reads these: orange belongs to the keel.
	 */
	--kb-ember: #d9530a;
	--kb-ember-text: #a83b04;

	/* --- Hairlines ------------------------------------------------------- */
	--kb-rule-bone: rgba(20, 16, 11, 0.14);
	--kb-rule-dark: rgba(159, 176, 170, 0.22);

	/* --- Surface-aware aliases -------------------------------------------
	 * Every component reads these rather than a literal colour, so a single
	 * surface class flips a whole subtree. --kb-accent is deliberately a
	 * foreground tone, not a hue: emphasis is carried by contrast and weight.
	 * ------------------------------------------------------------------- */
	--kb-bg: var(--kb-bone);
	--kb-fg: var(--kb-ink);
	--kb-fg-muted: var(--kb-muted-bone);
	--kb-raised: var(--kb-bone-raised);
	--kb-rule: var(--kb-rule-bone);
	--kb-accent: var(--kb-ink);
	--kb-accent-text: var(--kb-ink);
	--kb-focus: var(--kb-ink);

	/* --- Type ------------------------------------------------------------ */
	--kb-font-display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--kb-font-body: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/*
	 * The hero is set in two registers: a light setup line and the heavy phrase
	 * it hands to. Both are the same family at different weights, optical sizes
	 * and scales — see .kb-hero__setup / .kb-hero__key.
	 */
	--kb-fs-display: clamp(48px, 8.4vw, 104px); /* the hero's heavy register */
	--kb-fs-display-sub: clamp(24px, 3.4vw, 44px); /* the hero's light register */
	--kb-fs-h1: clamp(38px, 5.6vw, 68px);
	--kb-fs-h2: clamp(30px, 4vw, 50px);
	--kb-fs-h3: clamp(22px, 2.3vw, 30px);
	--kb-fs-h4: 20px;
	--kb-fs-lead: clamp(18px, 1.4vw, 22px);
	--kb-fs-body: 17px;
	--kb-fs-sm: 15px;
	--kb-fs-xs: 13px;
	--kb-fs-eyebrow: 12px;
	--kb-fs-stat: clamp(48px, 7vw, 88px);

	/*
	 * Bricolage's variable range as shipped: wght 200-800, opsz 12-96. The
	 * lighter half of that range is what makes the hero's two registers read as
	 * one composition rather than as two headings.
	 */
	--kb-fw-light: 250;
	--kb-fw-regular: 400;
	--kb-fw-medium: 500;
	--kb-fw-semibold: 600;
	--kb-fw-bold: 700;
	--kb-fw-black: 800;

	--kb-track-display: -0.035em; /* oversized headlines pull tight */
	--kb-track-tight: -0.022em;
	--kb-track-open: -0.008em; /* the hero's light register, set looser */
	--kb-track-eyebrow: 0.09em; /* enough to space small caps, and no more */

	--kb-lh-display: 0.92;
	--kb-lh-tight: 1.06;
	--kb-lh-heading: 1.14;
	--kb-lh-body: 1.65;

	/* --- Space ----------------------------------------------------------- */
	--kb-space-1: 8px;
	--kb-space-2: 16px;
	--kb-space-3: 24px;
	--kb-space-4: 40px;
	--kb-space-5: 64px;
	--kb-space-6: 96px;
	--kb-space-7: clamp(64px, 8vw, 112px); /* section rhythm */

	/* --- Layout ---------------------------------------------------------- */
	--kb-container: 1180px;
	--kb-measure: 68ch;
	--kb-gutter: clamp(20px, 5vw, 44px);

	/*
	 * Where the in-page keel thread sits: just outside the container on wide
	 * screens, tucked into the gutter on narrow ones.
	 */
	--kb-thread-x: max(14px, calc(50% - (var(--kb-container) / 2) - 28px));

	/* --- Radii ----------------------------------------------------------- */
	--kb-radius-sm: 6px;
	--kb-radius-md: 12px;
	--kb-radius-lg: 20px;
	--kb-radius-xl: 32px; /* the device shell: 32 outer, 12 pad, 20 inner */
	--kb-radius-full: 999px;

	/* --- Elevation -------------------------------------------------------
	 * One lift, two steps. There are no glows and no coloured shadows.
	 * ------------------------------------------------------------------- */
	--kb-lift: 0 1px 2px rgba(20, 16, 11, 0.06);
	--kb-lift-hover: 0 4px 14px rgba(20, 16, 11, 0.14);

	/* --- Motion ----------------------------------------------------------
	 * Interaction feedback stays under 200ms; reveals stay under 300ms; the
	 * hero keel draw is the one slow thing on the page, and it runs once.
	 * ------------------------------------------------------------------- */
	--kb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--kb-dur-fast: 150ms;
	--kb-dur: 260ms;
	--kb-dur-draw: 900ms;
}