/* =============================================================================
   Fone Tech — design tokens.
   =============================================================================

   One source of truth for both customer flows: `[frb_booking]` and
   `[frb_sell]`. They are different features with different logic, and they
   should be indistinguishable to look at — a customer who sells a phone on
   Monday and books a repair on Friday is dealing with one shop, not two
   websites.

   Loaded as a dependency of each flow's stylesheet, so it is requested once
   per page and only on pages that carry one of the shortcodes.

   Contrast ratios below are against the surface each colour is used on.
   Anything carrying meaning clears 4.5:1; a border that carries state
   clears 3:1.
   ========================================================================== */

:is(.frb-sell, .frb-sell-root, .frb-app, .frb-booking-root) {
	/* ---- Palette -------------------------------------------------------- */
	--frb-red-700: #aa1116;   /* brand primary */
	--frb-red-800: #8e0d12;   /* hover on light, error text */
	--frb-red-900: #72090d;   /* pressed */
	--frb-red-600: #c4141a;   /* hover on dark */
	--frb-red-400: #ff6b70;   /* accent text on dark only */
	--frb-red-50: #fce8e8;    /* brand tint */
	--frb-red-25: #fff1f1;    /* selected fill */
	--frb-ink: #0e0e0e;       /* the dark surface: price panel, banner, ticket */
	--frb-ink-raised: #1c1c1c;
	--frb-grey-900: #1a1a1a;
	--frb-grey-700: #555;     /* brand body */
	--frb-grey-600: #666;
	--frb-grey-500: #8a8a8a;
	--frb-grey-200: #e8e8e8;
	--frb-grey-100: #f0f0f0;
	--frb-grey-50: #f7f7f7;
	--frb-white: #fff;
	--frb-green-700: #1e6b3a;
	--frb-green-50: #e7f4ec;
	--frb-amber-800: #7a4b00;
	--frb-amber-50: #fff4db;

	/* ---- Semantic colour -------------------------------------------------- */
	--frb-text: var(--frb-grey-700);          /* 7.46 on white */
	--frb-text-strong: var(--frb-grey-900);   /* 17.40 on white */
	--frb-text-muted: var(--frb-grey-600);    /* 5.74 on white */
	--frb-text-brand: var(--frb-red-700);     /* 7.50 on white */
	--frb-on-dark: var(--frb-white);          /* 19.30 on ink */
	--frb-on-dark-soft: #d6d6d6;              /* 13.28 on ink */
	--frb-on-dark-muted: #b8b8b8;             /* 9.73 on ink */
	--frb-accent-on-dark: var(--frb-red-400); /* 6.98 on ink — never on white */
	--frb-text-disabled: #767676;

	--frb-surface: var(--frb-white);
	--frb-surface-subtle: var(--frb-grey-50);
	--frb-surface-media: linear-gradient(160deg, #fff 0%, #f1f1f1 100%);
	--frb-surface-selected: var(--frb-red-25);
	--frb-surface-disabled: var(--frb-grey-100);
	--frb-glow: radial-gradient(120% 90% at 100% 0%, rgb(170 17 22 / 55%) 0%, rgb(170 17 22 / 0%) 62%);

	--frb-border: var(--frb-grey-200);         /* decorative, never the only cue */
	--frb-border-control: var(--frb-grey-500); /* 3.45 on white */
	--frb-border-selected: var(--frb-red-700);
	--frb-border-on-dark: #3a3a3a;

	--frb-action: var(--frb-red-700);
	--frb-action-hover: var(--frb-red-800);
	--frb-action-active: var(--frb-red-900);
	--frb-action-on-dark-hover: var(--frb-red-600);
	--frb-action-text: var(--frb-white);
	--frb-ink-action: #000;

	/* One focus recipe everywhere: a ring plus a halo of the opposite
	   colour, so it stays visible on light and dark surfaces alike. */
	--frb-focus: #000;
	--frb-focus-halo: #fff;
	--frb-focus-width: 3px;
	--frb-focus-offset: 2px;

	/* ---- …except in a box you type into ----------------------------------
	   The recipe above is a hard black ring with a white gap, which is right
	   for a card or a button: it has to survive landing on any colour, and it
	   is only ever seen by someone navigating with a keyboard.

	   A text field is neither. `:focus-visible` matches a text input however
	   focus arrived — the spec's call, and the right one, because typing is
	   expected there — so that ring appears on an ordinary click, around the
	   most prominent control on the page, every time anyone uses it. It read
	   as an error state.

	   So a field focuses in the brand colour instead: a 2px ring with a soft
	   wash around it. #aa1116 is 7.5:1 on white, so this is a stronger
	   contrast cue than the field's resting grey, not a weaker one — it is
	   quieter without being fainter. The black recipe still applies to
	   everything that is not a field. */
	--frb-focus-field-glow: 0 0 0 3px rgb(170 17 22 / 14%);

	/*
	 * `@wordpress/components` paints its own accent — the selected day in the
	 * calendar, a focus ring, a busy button — and triples its emotion class
	 * to (0,3,0) to do it, so out-specifying every widget is a losing game.
	 * Setting the variables it reads recolours the library at the source, and
	 * keeps working when it ships new widgets.
	 */
	--wp-components-color-accent: var(--frb-red-700);
	--wp-admin-theme-color: var(--frb-red-700);
	--wp-components-color-accent-darker-10: var(--frb-red-800);
	--wp-components-color-accent-darker-20: var(--frb-red-900);
	--wp-components-color-accent-inverted: var(--frb-white);

	--frb-success-text: var(--frb-green-700);
	--frb-success-bg: var(--frb-green-50);
	--frb-warning-text: var(--frb-amber-800);
	--frb-warning-bg: var(--frb-amber-50);
	--frb-error-text: var(--frb-red-800);     /* 9.47 on white */
	--frb-error-bg: #fdecec;

	/* ---- Type ------------------------------------------------------------
	   Space Grotesk, fetched by whichever flow is on the page with
	   `display=swap`, so text paints immediately in the fallback. The
	   generic tail matters: these are 40 independently hosted sites, and on
	   the one where the request fails the flow must stay readable rather
	   than drop to a serif. */
	--frb-font: "Space Grotesk", sans-serif;
	--frb-fs-xs: 12px; --frb-lh-xs: 16px;
	--frb-fs-sm: 14px; --frb-lh-sm: 20px;
	--frb-fs-md: 16px; --frb-lh-md: 24px;  /* never below 16: iOS zooms on focus */
	--frb-fs-lg: 20px; --frb-lh-lg: 26px;
	--frb-fs-xl: 24px; --frb-lh-xl: 30px;
	--frb-fs-2xl: 32px; --frb-lh-2xl: 38px;
	--frb-fs-price: 48px; --frb-lh-price: 52px;
	--frb-fw-regular: 400; --frb-fw-medium: 500; --frb-fw-bold: 700;
	--frb-tracking-tight: -0.02em;
	--frb-tracking-caps: 0.08em;

	/* ---- Spacing, on a 4px base ----------------------------------------- */
	--frb-s-1: 4px; --frb-s-2: 8px; --frb-s-3: 12px; --frb-s-4: 16px;
	--frb-s-5: 20px; --frb-s-6: 24px; --frb-s-7: 32px; --frb-s-8: 48px;
	--frb-target: 44px;   /* smallest touch target anywhere */
	--frb-control: 52px;  /* inputs and buttons */

	/* ---- Shape and depth -------------------------------------------------- */
	--frb-radius-sm: 10px;
	--frb-radius-md: 14px;
	--frb-radius-lg: 20px;
	--frb-radius-full: 999px;
	--frb-bw: 1px; --frb-bw-strong: 2px;
	--frb-shadow-card: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 6%);
	--frb-shadow-lift: 0 2px 4px rgb(0 0 0 / 6%), 0 12px 28px rgb(0 0 0 / 10%);
	--frb-shadow-float: 0 10px 30px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 20%);

	/* ---- Motion ------------------------------------------------------------
	   Opacity, transform and colour only. Nothing that moves layout once it
	   has settled, and never a price counting up. */
	--frb-dur-fast: 120ms; --frb-dur-base: 200ms; --frb-dur-slow: 320ms;
	--frb-ease: cubic-bezier(0.2, 0, 0, 1);
	--frb-ease-out: cubic-bezier(0, 0, 0.2, 1);

	/* ---- Layout ------------------------------------------------------------- */
	--frb-max: 1080px;
	--frb-sidebar: 340px;
	--frb-sticky-top: 3.5rem;  /* a theme with a sticky header raises this */
	--frb-bar-h: 132px;        /* mobile bar; keeps focused fields clear of it */
}

@media (prefers-reduced-motion: reduce) {
	:is(.frb-sell, .frb-sell-root, .frb-app, .frb-booking-root) {
		--frb-dur-fast: 0.01ms;
		--frb-dur-base: 0.01ms;
		--frb-dur-slow: 0.01ms;
	}
}

@media (forced-colors: active) {
	:is(.frb-sell, .frb-sell-root, .frb-app, .frb-booking-root) {
		--frb-border: CanvasText;
		--frb-border-control: CanvasText;
		--frb-border-selected: Highlight;
		--frb-focus: Highlight;
	}
}