/* SEOmise public website: DESIGN TOKENS (1.78.0). The one place for the design tokens of every public page; loaded by
   resources/views/public/layout.blade.php before public.css. Components (public.css, menu.css, modules.css, home.css)
   only read these custom properties. */
/* ===================================================================================================================
   The tokens: the one place for the public website's colours, type, space, radii, shadows, motion and themes.
   1.78.0 ("Clear Signal 2", docs/specs/SITE-REDESIGN.md §3 and "Owner direction"). Owner, 14 Oct evening: LIGHT only —
   no dark sections, header or menus; the original light palette (the 1.71.0 values, unchanged) with green and teal on
   near-black ink. Rules:
   - The defaults are the light theme and every public page uses them. [data-theme="night"] still swaps the same names
     to deep-night values, for a small accent panel only (never a page section, the header or a menu).
   - Names from 1.71.0 (--bg, --card, --ink, --brand, --mint…) are kept, so older components inherit the changes. The
     names added for the night work (--night-0, --grad-night, --grad-aurora, --grid-lines…) are kept too, with light
     values, so nothing that reads them turns dark.
   - One accent gradient, green → teal (--grad-brand); no violet on the public pages. Gradient text appears at most once
     per page (the hero's rotating word), never behind body text.
   - Motion uses the --d-* durations and --ease-* curves; every animated component has a prefers-reduced-motion rule.
   =================================================================================================================== */
:root {
  /* Colour (light): the original 1.71.0 palette */
  --bg: #f6f8fb; --bg-2: #eef2f7; --card: #fff; --ink: #0b1526; --ink-2: #3a4860; --ink-3: #5f6d85; --line: #e2e7ef; --line-2: #cdd6e3;
  --brand: #0b8a5b; --brand-hover: #086c47; --brand-ink: #087249; --brand-bright: #19c37d; --mint: #dcf7ea; --mint-2: #effbf5;
  --on-brand: #fff;
  --aqua: #0e7490; --aqua-soft: #e0f2f6; --amber: #a15c07; --amber-soft: #fdf1dc; --coral: #b93815; --coral-soft: #fde7e0;
  --violet: #6d4fe0; --violet-soft: #ece8fd;
  --night: #0b1526; --night-2: #13213a; --night-line: rgba(230, 237, 247, 0.12); --on-night: #e6edf7; --on-night-2: #a9b6ca;
  /* Soft brand tints for big blocks (bento tiles, washes): mint, pale aqua, warm cream */
  --cream: #fbf6ec; --cream-2: #f5ecda; --aqua-2: #eef8fa; --mint-3: #c6efdb;
  /* Names kept from the night work, light values: the page base, a raised base and a deeper tint */
  --night-0: #ffffff; --night-1: #f6f8fb; --night-3: #eef2f7;
  --glow-green: #19c37d; --glow-teal: #14b8c4; --glow-violet: #14b8c4;
  /* Gradients */
  --grad-brand: linear-gradient(120deg, #19c37d 0%, #14b8c4 100%);
  /* Text-safe on white (AA): deep green to deep teal; one word per page */
  --grad-brand-text: linear-gradient(100deg, #087249 0%, #0b8a5b 45%, #0e7490 100%);
  /* The strong colour panel (closing band, recommended plan): white text on it keeps at least 5:1 */
  --grad-deep: linear-gradient(125deg, #086c47 0%, #0a6b58 50%, #0e6a86 100%);
  /* Soft washes for light sections (mint, teal and aqua at low opacity) */
  --grad-aurora: radial-gradient(55% 60% at 88% 0%, rgba(20, 184, 196, .12), transparent 70%),
    radial-gradient(50% 60% at 6% 8%, rgba(25, 195, 125, .12), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(14, 116, 144, .06), transparent 70%);
  --grad-night: var(--grad-aurora), linear-gradient(180deg, #fff, var(--bg));
  /* Fine light-grey line grid and dot grid: decoration that supports a section */
  --grid-lines: linear-gradient(rgba(11, 21, 38, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 21, 38, .055) 1px, transparent 1px);
  --dots: radial-gradient(rgba(11, 21, 38, .14) 1px, transparent 1.5px);
  --mark: rgba(25, 195, 125, .28);
  /* Glass (white, translucent) */
  --glass: rgba(255, 255, 255, .72); --glass-2: rgba(255, 255, 255, .9); --glass-line: rgba(11, 21, 38, .08); --glass-hi: rgba(255, 255, 255, .7);
  --glass-blur: saturate(160%) blur(16px);
  --focus: #0b8a5b; --focus-ring: 0 0 0 3px rgba(11, 138, 91, .28);
  /* Type */
  --display: "Bricolage Grotesque", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-display: clamp(44px, 7.4vw, 120px); --t-h1: clamp(38px, 5vw, 72px); --t-h2: clamp(30px, 3.6vw, 48px); --t-h3: clamp(19px, 1.6vw, 24px);
  --t-lede: clamp(17px, 1.45vw, 21px); --t-body: 16px; --t-small: 14.5px; --t-label: 12px;
  /* Space (4 px base) and layout */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --sec: clamp(72px, 9vw, 144px); --sec-tight: clamp(48px, 6vw, 96px);
  --wrap: 1200px; --wrap-wide: 1320px; --gutter: 24px;
  /* Radii: smaller elements get smaller radii */
  --r-xs: 8px; --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  /* Shadows (soft, slightly green-tinted) */
  --sh-1: 0 1px 2px rgba(11, 21, 38, 0.06), 0 1px 1px rgba(11, 21, 38, 0.04);
  --sh-2: 0 1px 2px rgba(11, 21, 38, 0.05), 0 12px 32px -12px rgba(11, 21, 38, 0.18);
  --sh-3: 0 2px 4px rgba(11, 21, 38, 0.05), 0 24px 48px -16px rgba(11, 21, 38, 0.24);
  --sh-media: 0 0 0 1px rgba(11, 21, 38, .06), 0 30px 60px -28px rgba(11, 21, 38, .35), 0 12px 24px -16px rgba(11, 21, 38, .18);
  --sh-glow: 0 10px 28px -10px rgba(11, 138, 91, .55);
  --sh-panel: 0 40px 80px -36px rgba(11, 21, 38, .30), 0 0 0 1px rgba(11, 21, 38, .06);
  --sh-soft: 0 1px 2px rgba(11, 21, 38, .04), 0 28px 60px -32px rgba(8, 72, 52, .26);
  /* Motion */
  --d-1: 150ms; --d-2: 250ms; --d-3: 400ms; --d-4: 650ms;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1); --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.2, 1.1, 0.3, 1);
  /* Added for the home page (public/css/home.css): the giant statement line and a paper grain
     (an inline SVG noise, under 1 KB; decorative only, at very low opacity). */
  --t-mega: clamp(52px, 9.4vw, 152px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* Night theme: the same names, deep-night values, for a small accent panel only (owner, 14 Oct: never a page section,
   the header or a menu). Text pairs keep at least 4.5:1 on --bg and on --card. */
[data-theme="night"] {
  --bg: #070d1a; --bg-2: rgba(255, 255, 255, .06); --card: rgba(255, 255, 255, .045); --ink: #eef3fa; --ink-2: #b9c5d6; --ink-3: #8e9bb2;
  --line: rgba(232, 238, 247, .10); --line-2: rgba(232, 238, 247, .20);
  --brand: #19c37d; --brand-hover: #3fd893; --brand-ink: #43dc9b; --brand-bright: #3fe3a0; --mint: rgba(25, 195, 125, .15); --mint-2: rgba(25, 195, 125, .08);
  --on-brand: #04130c;
  --aqua: #3cc9d6; --aqua-soft: rgba(20, 184, 196, .15); --amber: #f2b45a; --amber-soft: rgba(242, 180, 90, .14); --coral: #ff8a66; --coral-soft: rgba(255, 138, 102, .14);
  --violet: #a993ff; --violet-soft: rgba(139, 108, 255, .16);
  --glass: rgba(14, 24, 42, .62); --glass-2: rgba(16, 27, 48, .86); --glass-line: rgba(232, 238, 247, .10); --glass-hi: rgba(255, 255, 255, .06);
  --focus: #3fe3a0; --focus-ring: 0 0 0 3px rgba(63, 227, 160, .35);
  --mark: rgba(25, 195, 125, .30);
  --sh-1: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px var(--line);
  --sh-2: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px var(--line-2), 0 24px 48px -24px rgba(0, 0, 0, .7);
  --sh-3: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--line-2), 0 30px 60px -24px rgba(0, 0, 0, .8);
  --sh-glow: 0 10px 34px -8px rgba(25, 195, 125, .55);
  --sh-panel: 0 50px 100px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(232, 238, 247, .08);
  color: var(--ink); color-scheme: dark;
}
[data-theme="night"] :focus-visible { outline-color: var(--focus); }