/* =============================================================================
   Onepoint Blocks Pro – Shared Design Tokens

   Every Onepoint block reads from these --op-* variables.
   To brand the plugin for your site, override the variables in your theme –
   you do NOT need to touch this file or any block's style.css.

   See the THEME CUSTOMISATION GUIDE at the bottom of this file.
   ============================================================================= */

:root {
	/* ── Typography ──────────────────────────────────────────────────────── */
	--op-font-body:             sans-serif;
	--op-font-heading:          sans-serif;
	--op-fw-normal:             400;
	--op-fw-medium:             500;
	--op-fw-semibold:           600;
	--op-fw-bold:               700;
	--op-leading-none:          1;
	--op-leading-tight:         1.1;
	--op-leading-snug:          1.2;
	--op-leading-normal:        1.5;
	--op-leading-relaxed:       1.6;
	--op-leading-loose:         1.75;
	--op-text-xs:               0.75rem;
	--op-text-sm:               0.875rem;
	--op-text-base:             1rem;
	--op-text-md:               1.125rem;
	--op-text-lg:               1.25rem;
	--op-text-xl:               1.5rem;
	--op-text-2xl:              1.875rem;
	--op-text-3xl:              2.25rem;
	--op-text-4xl:              2.625rem;
	--op-text-5xl:              3rem;
	--op-text-6xl:              3.5rem;
	--op-text-7xl:              4rem;
	--op-text-8xl:              4.5rem;
	--op-space-1:               0.25rem;
	--op-space-2:               0.5rem;
	--op-space-3:               0.75rem;
	--op-space-4:               1rem;
	--op-space-5:               1.25rem;
	--op-space-6:               1.5rem;
	--op-space-8:               2rem;
	--op-space-10:              2.5rem;
	--op-space-12:              3rem;
	--op-space-16:              4rem;
	--op-space-20:              5rem;
	--op-space-24:              6rem;
	--op-space-28:              7rem;
	--op-space-32:              8rem;
	/* ── Brand colours ───────────────────────────────────────────────────── */
	--op-color-dark:            #111;
	--op-color-teal:            #009e8a;
	--op-color-purple:          var(--op-color-accent);
	--op-color-blue:            var(--op-color-teal);
	--op-color-bubblegum:       var(--op-color-accent);
	--op-gradient-accent-diagonal: linear-gradient(135deg, var(--op-color-purple) 0%, var(--op-color-blue) 100%);
	--op-color-light:           var(--wp--preset--color--background, #fff);
	/*
	 * Brand accent fallback.
	 * Used when a block's themeColorSlug preset is missing (theme switched,
	 * slug renamed, palette stripped). Intentionally a neutral hex that is
	 * NOT part of the shipped theme.json palette, so when it appears it is
	 * clearly recognisable as a fallback rather than a real brand colour.
	 */
	--op-color-accent-fallback: #2271b1;
	--op-color-accent:          var(--wp--preset--color--primary, var(--op-color-accent-fallback));

	/* ── Text colours ────────────────────────────────────────────────────── */
	--op-color-text:            color-mix(in srgb, var(--op-color-dark) 85%, transparent);
	--op-color-text-muted:      color-mix(in srgb, var(--op-color-dark) 60%, transparent);
	--op-color-text-light:      color-mix(in srgb, var(--op-color-dark) 55%, transparent);

	/* ── Status colours ──────────────────────────────────────────────────── */
	--op-color-error:           var(--wp--preset--color--error, #b91c1c);
	--op-color-error-border:    color-mix(in srgb, var(--op-color-error) 80%, transparent);
	--op-color-required:        var(--op-color-error);
	--op-color-success:         var(--wp--preset--color--success, #15803d);
	
	/* ── Border radius ───────────────────────────────────────────────────── */
	--op-radius-sm:             4px;
	--op-radius-md:             8px;
	--op-radius-lg:             12px;
	--op-radius-input:          6px;
	--op-radius-btn:            6px;
	--op-card-radius:           clamp(8px, 2vw, 12px);

	/* ── Inputs ──────────────────────────────────────────────────────────── */
	--op-input-bg:              var(--op-color-light);
	--op-input-border:          color-mix(in srgb, var(--op-color-dark) 22%, transparent);
	--op-input-focus:           var(--op-color-accent);
	--op-input-height:          clamp(44px, 8vw, 52px);

	/* ── Buttons ─────────────────────────────────────────────────────────── */
	--op-btn-bg:                var(--op-color-dark);
	--op-btn-color:             var(--op-color-light);
	--op-btn-hover-bg:          color-mix(in srgb, var(--op-color-dark) 85%, var(--op-color-accent));
	--op-btn-padding:           0.75em 1.75em;
	--op-btn-font-size:         1rem;

	/* ── Card container ──────────────────────────────────────────────────── */
	--op-card-bg:               var(--op-color-light);
	--op-card-border:           color-mix(in srgb, var(--op-color-dark) 15%, transparent);
	--op-card-radius:           clamp(8px, 2vw, 12px);
	--op-card-padding:          clamp(24px, 5vw, 48px);
	/* Soft accent tint for cards, tab shells, and tinted panels (override per block via inline style). */
	--op-accent-surface:        color-mix(in srgb, var(--op-color-accent) 12%, var(--op-color-light));

	/* ── Forms ───────────────────────────────────────────────────────────── */
	--op-form-bg:               var(--op-card-bg);
	--op-form-border:           var(--op-card-border);
	--op-form-padding:          clamp(24px, 5vw, 48px);

	/* ── Section label backdrop ──────────────────────────────────────────── */
	--op-section-backdrop:      radial-gradient(ellipse at center, color-mix(in srgb, var(--op-color-dark) 4%, transparent) 0%, transparent 70%);
	--op-section-backdrop-blur: 20px;
	--op-section-label-color:   var(--op-color-dark);

	/* ── Spinner ─────────────────────────────────────────────────────────── */
	--op-spinner-track:         color-mix(in srgb, var(--op-color-accent) 25%, transparent);
	--op-spinner-color:         var(--op-color-accent);

	/* ── Card colour ramp (shades 50–600; 12 uniform steps) ────────────────
	 * Monochrome fallback layer. Theme-aware brand shades are written inline
	 * on the block wrapper by `buildRampStyles()` (editor) and PHP render
	 * (frontend). When those overrides are absent or the chosen theme does
	 * not define the requested shade, the values below are what cards inherit.
	 * Text shades flip after card 8: cards 1-8 use progressively lighter dark
	 * text; cards 9-12 use progressively darker light text. */
	--op-card-ramp-1:           color-mix(in srgb, var(--op-color-dark)  5%, var(--op-card-bg));
	--op-card-ramp-2:           color-mix(in srgb, var(--op-color-dark) 10%, var(--op-card-bg));
	--op-card-ramp-3:           color-mix(in srgb, var(--op-color-dark) 15%, var(--op-card-bg));
	--op-card-ramp-4:           color-mix(in srgb, var(--op-color-dark) 20%, var(--op-card-bg));
	--op-card-ramp-5:           color-mix(in srgb, var(--op-color-dark) 25%, var(--op-card-bg));
	--op-card-ramp-6:           color-mix(in srgb, var(--op-color-dark) 30%, var(--op-card-bg));
	--op-card-ramp-7:           color-mix(in srgb, var(--op-color-dark) 35%, var(--op-card-bg));
	--op-card-ramp-8:           color-mix(in srgb, var(--op-color-dark) 40%, var(--op-card-bg));
	--op-card-ramp-9:           color-mix(in srgb, var(--op-color-dark) 45%, var(--op-card-bg));
	--op-card-ramp-10:          color-mix(in srgb, var(--op-color-dark) 50%, var(--op-card-bg));
	--op-card-ramp-11:          color-mix(in srgb, var(--op-color-dark) 55%, var(--op-card-bg));
	--op-card-ramp-12:          color-mix(in srgb, var(--op-color-dark) 60%, var(--op-card-bg));
	--op-card-ramp-text-1:      color-mix(in srgb, var(--op-color-dark)   95%, var(--op-card-bg));
	--op-card-ramp-text-2:      color-mix(in srgb, var(--op-color-dark)   95%, var(--op-card-bg));
	--op-card-ramp-text-3:      color-mix(in srgb, var(--op-color-dark)   90%, var(--op-card-bg));
	--op-card-ramp-text-4:      color-mix(in srgb, var(--op-color-dark)   90%, var(--op-card-bg));
	--op-card-ramp-text-5:      color-mix(in srgb, var(--op-color-dark)   85%, var(--op-card-bg));
	--op-card-ramp-text-6:      color-mix(in srgb, var(--op-color-dark)   85%, var(--op-card-bg));
	--op-card-ramp-text-7:      color-mix(in srgb, var(--op-color-dark)   80%, var(--op-card-bg));
	--op-card-ramp-text-8:      color-mix(in srgb, var(--op-color-dark)   80%, var(--op-card-bg));
	--op-card-ramp-text-9:      color-mix(in srgb, var(--op-color-light)  90%, var(--op-card-bg));
	--op-card-ramp-text-10:     color-mix(in srgb, var(--op-color-light)  90%, var(--op-card-bg));
	--op-card-ramp-text-11:     color-mix(in srgb, var(--op-color-light)  95%, var(--op-card-bg));
	--op-card-ramp-text-12:     color-mix(in srgb, var(--op-color-light)  95%, var(--op-card-bg));
	--op-card-ramp-text-dark:   var(--op-color-dark);
	--op-card-ramp-text-light:  var(--op-color-light);

	/* ── Accent surface (active nav rows, chips) ─────────────────────────── */
	--op-accent-surface:        color-mix(
		in srgb,
		var( --op-color-accent ) 8%,
		var( --op-color-light )
	);

	/* ── Sticky offset (blocks sync runtime --op-sticky-top on their root) ─ */
	--op-sticky-top-fallback:   6rem;

	/* ── Sidebar / in-page nav (policies menu, indexes, etc.) ─────────────── */
	--op-sidebar-nav-width:     15.75rem;
	--op-nav-heading-size:      1.625rem;
	--op-nav-heading-leading:   2.25rem;
	--op-nav-heading-color:     var( --op-color-text-light );
	--op-nav-muted-color:       var( --op-color-text-muted );
	--op-nav-emphasis-color:    var(
		--wp--preset--color--charcoal,
		var( --op-color-dark )
	);
	--op-nav-item-gap:          var( --op-space-4 );
	--op-nav-row-gap:           0.875rem;
	--op-nav-sub-gap:           0.625rem;
	--op-nav-marker-size:       0.3125rem;
	--op-nav-chevron-width:     0.4375rem;
	--op-nav-chevron-height:    0.75rem;
	--op-nav-row-padding-block: 0.375rem;
	--op-nav-row-padding-inline: 0.5rem;
	--op-nav-current-row-min-height: 2.1875rem;
	--op-nav-current-leading: 1.4375rem;

	/* ── Dual marquee gallery cards ──────────────────────────────────────── */
	--op-dual-marquee-card-bg:     var(--op-card-bg);
	--op-dual-marquee-card-border: var(--op-color-accent);
	--op-dual-marquee-card-text:   var(--op-color-text);
}