/* ===========================================================
   OnFinance Design System, Tokens
   Direction 01, "Clear. Human. Considered.", evolved from the
   existing brand mark (red + charcoal + grey) into a warmer,
   editorial, premium-but-human palette. Typography is a single
   generic, Arial-like sans (Inter) used throughout for headlines
   and body/UI alike, leaning on its full weight range (400-800)
   and true italics for hierarchy instead of a separate display face.
=========================================================== */

:root{
  color-scheme: light;

  /* ---- Brand colour: refined from the live-site red (#d30007) ---- */
  --brand-red-900: #6E0F13;
  --brand-red-700: #971418;
  --brand-red-600: #B8181D;
  --brand-red-500: #C81D23; /* primary action red, deeper & calmer than the legacy alarm-red */
  --brand-red-400: #DA4147;
  --brand-red-100: #F7E2E2;
  --brand-red-050: #FCF1F1;

  /* ---- Secondary: the underused navy from the live CSS (#01189b), matured ---- */
  --brand-navy-900: #0B1B2E;
  --brand-navy-700: #12304F;
  --brand-navy-500: #1D4670;
  --brand-navy-100: #E4EBF1;

  /* ---- Warm sand accent, used sparingly for premium section rhythm ---- */
  --sand-500: #C9A24B;
  --sand-100: #F3E9D6;
  --sand-050: #FAF5EA;

  /* ---- Neutral ink scale (charcoal, evolved from #212934) ---- */
  --ink-950: #14181C;
  --ink-900: #1C2126;
  --ink-800: #2A3037;
  --ink-700: #3B424A;
  --ink-600: #545C65;
  --ink-500: #6E7680;
  --ink-400: #939AA3;
  --ink-300: #C0C6CC;
  --ink-200: #DDE1E5;
  --ink-100: #EEF0F2;
  --ink-050: #F6F7F8;

  /* ---- Paper / surfaces, warm off-white, not clinical white ---- */
  --paper: #FBF9F5;
  --surface: #FFFFFF;
  --surface-sunken: #F3F1EC;

  /* ---- Semantic tokens ---- */
  --color-bg: var(--paper);
  --color-surface: var(--surface);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-text-on-dark: #F5F2ED;
  --color-text-on-dark-muted: #B9C0C9;
  --color-border: var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-accent: var(--brand-red-500);
  --color-accent-strong: var(--brand-red-600);
  --color-accent-contrast: #FFFFFF;
  --color-focus: #0B5FFF;
  --color-success: #1E7B4D;
  --color-success-bg: #E6F3EC;
  --color-error: #B3261E;
  --color-error-bg: #FBEAE9;

  /* ---- Typography, Direction 01 "Clear. Human. Considered." ---- */
  --font-display: "Inter", Arial, Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", Arial, Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale, clamp(min, preferred, max) */
  --text-xs:   clamp(0.76rem, 0.74rem + 0.1vw, 0.82rem);
  --text-sm:   clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --text-base: clamp(1rem, 0.97rem + 0.2vw, 1.1rem);
  --text-md:   clamp(1.15rem, 1.1rem + 0.3vw, 1.3rem);
  --text-lg:   clamp(1.35rem, 1.25rem + 0.5vw, 1.65rem);
  --text-xl:   clamp(1.7rem, 1.5rem + 1vw, 2.2rem);
  --text-2xl:  clamp(2.1rem, 1.8rem + 1.6vw, 3rem);
  --text-3xl:  clamp(2.6rem, 2.1rem + 2.6vw, 4.2rem);
  --text-4xl:  clamp(3.1rem, 2.4rem + 3.6vw, 5.4rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ---- Fluid spacing scale ---- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.3rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.6rem);
  --space-xs:  clamp(0.75rem, 0.69rem + 0.3vw, 0.9rem);
  --space-sm:  clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  --space-md:  clamp(1.6rem, 1.4rem + 0.9vw, 2.2rem);
  --space-lg:  clamp(2.4rem, 2rem + 1.8vw, 3.6rem);
  --space-xl:  clamp(3.6rem, 2.9rem + 3.2vw, 5.6rem);
  --space-2xl: clamp(5rem, 3.8rem + 5.4vw, 8.4rem);
  --space-3xl: clamp(6.5rem, 4.8rem + 7.8vw, 11rem);

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-full: 999px;

  /* ---- Shadows, soft, ambient, never harsh ---- */
  --shadow-sm: 0 1px 2px rgba(20, 24, 28, 0.06), 0 1px 1px rgba(20,24,28,0.04);
  --shadow-md: 0 8px 24px -8px rgba(20, 24, 28, 0.18), 0 2px 6px rgba(20,24,28,0.06);
  --shadow-lg: 0 24px 60px -20px rgba(20, 24, 28, 0.28), 0 6px 16px rgba(20,24,28,0.08);
  --shadow-inset: inset 0 0 0 1px rgba(20,24,28,0.08);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 100ms;
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;
  --duration-slower: 900ms;

  /* ---- Layout ---- */
  --content-max: 1320px;
  --content-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --header-h: 84px;

  /* ---- Touch targets ---- */
  --tap-min: 44px;

  /* ---- Expressive layer: structural / wireframe ---- */
  --wire-line: rgba(20, 24, 28, 0.14);
  --wire-line-strong: var(--ink-950);
  --wire-tick: var(--brand-red-500);
  --wire-offset: 6px;
  --wire-shadow: var(--wire-offset) var(--wire-offset) 0 var(--ink-950);
  --wire-shadow-red: var(--wire-offset) var(--wire-offset) 0 var(--brand-red-500);
  --blueprint-gap: 4.5rem;

  /* ---- Expressive layer: bento ---- */
  --bento-gap: clamp(0.6rem, 1.4vw, 1.1rem);
  --bento-radius: var(--radius-lg);
  --bento-cols: 6;

  /* ---- Expressive layer: pointer + depth ---- */
  --ptr-x: 0.5;
  --ptr-y: 0.5;
  --ptr-dx: 0;
  --ptr-dy: 0;
  --depth-perspective: 1200px;
  --tilt-max: 6deg;
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-dark: rgba(255, 255, 255, 0.06);
  --glass-blur: 14px;
  --glass-line: rgba(255, 255, 255, 0.5);

  /* ---- Expressive layer: tactile micro-interaction ---- */
  --tactile-duration: 240ms;
  --tactile-ease: cubic-bezier(0.2, 0.8, 0.25, 1);
  --tactile-lift: -3px;
  --tactile-press: 0.97;

  /* ---- Expressive layer: kinetic typography axes ---- */
  --kin-wght: 700;
  --kin-slnt: 0;
  --kin-track: -0.02em;
}

/* Dark surfaces (footer, hero) get inverted semantic tokens locally */
.on-dark{
  --color-text: var(--color-text-on-dark);
  --color-text-muted: var(--color-text-on-dark-muted);
  --color-border: rgba(245, 242, 237, 0.16);
  --color-border-strong: rgba(245, 242, 237, 0.28);
  color: var(--color-text);
}

.on-dark{
  --wire-line: rgba(245, 242, 237, 0.18);
  --wire-line-strong: rgba(245, 242, 237, 0.85);
  --wire-shadow: var(--wire-offset) var(--wire-offset) 0 rgba(245, 242, 237, 0.9);
  --glass-bg: var(--glass-bg-dark);
  --glass-line: rgba(245, 242, 237, 0.22);
}

@media (prefers-reduced-motion: reduce){
  :root{
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --tactile-duration: 0ms;
    --tilt-max: 0deg;
  }
}

/* Eco-design. Visitors on a metered or saving connection get the flat,
   cheapest version of every effect. */
@media (prefers-reduced-data: reduce){
  :root{
    --glass-blur: 0px;
    --tilt-max: 0deg;
  }
}