/* Shared design tokens — single source of truth for color/spacing/shadow/radius
   values across Shopy-Link.html, privacy-security-page.html and trial-refund-policy-page.html.

   NOTE: this navy/gold palette is intentionally distinct from the Investa
   corporate site's brand-kit palette (../tokens.css). Shopy-Link is treated
   as its own product identity, not required to match the parent company's
   visual system — do not "fix" this to the corporate colors. */
:root{
  color-scheme: light;

  /* ---- Brand palette (Investa AI Solution / Shopy-Link) ---- */
  --navy-950:#091828; --navy-925:#0D2238; --navy-900:#0C2040; --navy-800:#112B47; --navy-700:#163358; --navy-500:#3A5278;
  --gold-100:#FAF4E4; --gold-200:#FFF8E8; --gold-250:#F0D999; --gold-300:#D4AC52; --gold-500:#C4A040; --gold-600:#B8902E; --gold-650:#A67E24; --gold-700:#8B6010;
  --neutral-50:#F7F8FA; --neutral-100:#EFF1F5; --neutral-200:#DDE2EA; --neutral-300:#A0AAB8; --neutral-400:#6B7A8D; --neutral-450:#64758A; --neutral-500:#556177;
  --emerald-300:#6EE7B7; --emerald-500:#059669; --emerald-600:#047857; --emerald-700:#065F46; --emerald-bg:#ECFDF5; --emerald-line:#A7F3D0;
  --red-400:#F87171;
  --surface-canvas:#F3F4F7; --surface-card:#FDFCFA; --surface-elevated:#FFFFFF; --white:#FFFFFF;
  --text-primary:#1A2138; --text-secondary:var(--neutral-500); --text-disabled:var(--neutral-300);
  --border-default:var(--neutral-200);
  --interactive:var(--navy-900); --interactive-hover:var(--navy-800); --on-interactive:#FFFFFF;
  --brand-accent:var(--gold-600); --brand-fill-safe:var(--gold-700);
  --focus-ring:var(--navy-700);
  --ok:#15803D; --ok-bg:#F0FDF4; --ok-border:rgba(21,128,61,.22);
  --err:#B91C1C; --err-bg:#FEF2F2; --info:#1D6BA8; --info-bg:#EFF6FF; --warn:#B45309; --warn-bg:#FFFBEB;
  --gold-tint-bg:#FFFDF7; --gold-ink:#1A1200; --gold-line:#E7D9B0;

  /* Text/surfaces used on dark (navy) backgrounds */
  --on-dark:#F0F2F6; --on-dark-75:rgba(240,242,246,.75); --on-dark-65:rgba(240,242,246,.65);
  --on-dark-55:rgba(240,242,246,.55); --on-dark-40:rgba(240,242,246,.4); --navy-tint-text:#A8B4C6;

  /* Alpha-tint overlays (white/navy/gold/emerald at low opacity, for glass panels & scrims) */
  --white-04:rgba(255,255,255,.04); --white-05:rgba(255,255,255,.05); --white-06:rgba(255,255,255,.06);
  --white-08:rgba(255,255,255,.08); --white-09:rgba(255,255,255,.09); --white-10:rgba(255,255,255,.1); --white-30:rgba(255,255,255,.3);
  --surface-card-88:rgba(253,252,250,.88);
  --gold-tint-03:rgba(212,172,82,.03); --gold-tint-14:rgba(212,172,82,.14); --gold-tint-18:rgba(212,172,82,.18);
  --emerald-tint-06:rgba(5,150,105,.06); --emerald-tint-18:rgba(5,150,105,.18); --emerald-300-border:rgba(52,211,153,.3);
  --scrim-navy-60:rgba(9,24,40,.6);

  /* Third-party integration brand colors (single-use, kept as named tokens for clarity) */
  --brand-whatsapp:#25D366; --brand-instagram:#C13584; --brand-messenger:#0084FF; --brand-livechat:#3A5278;
  --brand-shopify:#1B6E5E; --brand-woocommerce:#7F54B3; --brand-tiktok:#111111;

  /* ---- Typography ---- */
  --font-ui:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-lg:17px; --text-xl:19px;
  --text-2xl:clamp(22px,1.6vw + 16px,26px); --text-3xl:clamp(28px,2.2vw + 18px,38px);
  --text-hero:clamp(32px,3.6vw + 16px,54px);

  /* ---- Spacing scale ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s14:56px; --s16:64px; --s20:80px; --s24:96px;

  /* ---- Radii ---- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;

  /* ---- Shadows (kept exact per-usage values from the original design, not the legal
     pages' multi-layer variants, to preserve pixel-identical output) ---- */
  --shadow-xs:0 1px 3px rgba(12,32,64,.07),0 1px 2px rgba(12,32,64,.04);
  --shadow-card:0 1px 3px rgba(12,32,64,.07);
  --shadow-step:0 2px 8px rgba(12,32,64,.09);
  --shadow-elevated:0 4px 18px rgba(12,32,64,.12);
  --shadow-sm:0 2px 8px rgba(12,32,64,.09),0 1px 3px rgba(12,32,64,.05);
  --shadow-md:0 4px 18px rgba(12,32,64,.12),0 2px 6px rgba(12,32,64,.07);
  --shadow-panel:0 8px 36px rgba(12,32,64,.16);
  --shadow-lg:0 8px 36px rgba(12,32,64,.16),0 3px 10px rgba(12,32,64,.08);
  --shadow-gold:0 4px 20px rgba(184,144,46,.32);

  /* ---- Motion ---- */
  --t-fast:120ms; --t-med:180ms; --t-slow:320ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --duration-press:150ms; --duration-dropdown:200ms; --duration-modal:220ms; --duration-modal-exit:160ms;

  /* ---- Layout ---- */
  --container:1240px; --reading:720px;
}