/* ===========================================================================
   Finperiti — design tokens (Brandbook v1.0 + V2 refinements, 2026)

   The ONE source of every colour, radius, shadow, type and motion value.
   new-brandbook/tokens.css is the master; the app serves an identical copy
   from Aml.Onboarding.Shared.Web.Components/wwwroot/tokens.css (a unit test
   keeps them equal).

   Components use the SEMANTIC tokens (--surface, --ink, --accent, …), never
   the brand constants directly as a background behind theme-aware text.

   Themes: :root follows the OS ("light dark"). The toggle sets data-theme on
   <html> to light | mist | dark | graphite. Theme-dependent tokens are
   light-dark(<light>, <dark>) pairs; mist and graphite override a few of them.
   =========================================================================== */
:root { color-scheme: light dark; }
:root[data-theme="light"], :root[data-theme="mist"]:not(:has(.public-site)) { color-scheme: light; }
:root[data-theme="dark"], :root[data-theme="graphite"]:not(:has(.public-site)) { color-scheme: dark; }
/* The public site is one fixed design (dark bands on light sections): never themed, whatever the visitor chose elsewhere. */
:root:has(.public-site) { color-scheme: light; }

:root {
  /* ---- Brand constants (same in every theme) ---- */
  --petrol: #0e4f5e;        /* primary · logo wordmark */
  --teal: #0e9f90;          /* jewel teal · accent, charts */
  --teal-deep: #0b7e72;     /* teal for small text on white (5.0:1) */
  --bright: #5de6d2;        /* bright teal · dark surfaces only */
  --turquoise: #3ee3d3;     /* call to action on dark (ink text, 11:1) */
  --aqua: #16cfc5;
  --brand-ink: #08191c;     /* deepest value · text on bright fills */
  --steel: #5b6b7c;
  --mist: #eaf0f1;
  --ocean: #003943;         /* petrol-family dark surfaces */
  --midnight: #002b36;
  --abyss: #001f27;
  --evergreen: #1c7a5b;     /* reserved: success */
  --coral: #e0a48a;         /* reserved: caution */
  --chrome-red: #ef6a5e;    /* product-window traffic lights (illustrations only) */
  --chrome-amber: #f4bf4f;
  --chrome-green: #61c554;

  /* Dark brand bands (hero, security, closing CTA, sidebar) — dark in every theme. */
  --band-bg: radial-gradient(1100px 640px at 82% 12%, rgb(93 230 210 / .17), transparent 62%),
             radial-gradient(900px 620px at -5% 105%, rgb(14 159 144 / .22), transparent 60%),
             linear-gradient(160deg, var(--petrol) 0%, var(--ocean) 46%, var(--midnight) 100%);
  --band-bg-quiet: radial-gradient(800px 500px at 100% 0%, rgb(110 175 155 / .22), transparent 60%),
                   linear-gradient(150deg, var(--petrol) 0%, var(--ocean) 55%, var(--midnight) 100%);
  --on-band: #ffffff;
  --on-band-soft: #bcd5d9;
  --on-band-faint: #8fb0b6;
  --band-line: rgb(255 255 255 / .11);
  --band-accent: var(--bright);
  --cta: var(--turquoise);
  --on-cta: var(--brand-ink);
  --grad-accent: linear-gradient(92deg, var(--bright) 0%, var(--turquoise) 50%, var(--aqua) 100%);

  /* ---- Semantic surfaces & text (light, dark) ---- */
  --bg:            light-dark(#f4f7f8, #001f27);
  --surface:       light-dark(#ffffff, #002b36);
  --surface-2:     light-dark(#eef3f4, #003943);
  --ink:           light-dark(#102b38, #e6f1f1);
  --ink-soft:      light-dark(#4f6670, #bcd5d9);
  --ink-faint:     light-dark(#52666f, #8fb0b6);
  --heading:       light-dark(#0e4f5e, #d5f6f1);
  --border:        light-dark(#dfeaed, #0f4652);
  --border-strong: light-dark(#c9dadf, #1d5a66);

  /* Primary action and links. */
  --accent:        light-dark(#0e4f5e, #3ee3d3);
  --accent-hover:  light-dark(#0b7e72, #5de6d2);
  --on-accent:     light-dark(#ffffff, #08191c);
  --accent-ink:    light-dark(#0a7569, #5de6d2);
  --accent-soft:   light-dark(#e2f2ef, #08404a);

  /* ---- Status (always paired with an icon and a word) ---- */
  --green:  light-dark(#1c7a5b, #46c996);
  --amber:  #f59e0b;
  --orange: light-dark(#9a5a1c, #f0a94e);
  --red:    light-dark(#b8323d, #ff8a7d);
  --info:   light-dark(#08707f, #5de6d2);
  --violet: light-dark(#5a50c0, #b3acff);

  /* ---- Notice banners (warning / danger): surface, border, bar, text, and text on the bar ---- */
  --warn-bg:     light-dark(#fff8e6, #2c2410);
  --warn-border: light-dark(#f4c84b, #5a4a1e);
  --warn-bar:    #e8a400;
  --warn-ink:    light-dark(#5b4708, #ffe6a8);
  --warn-ink-soft: light-dark(#6f5a1a, #d9c283);
  --on-warn-bar: #2a1f00;
  --danger-bg:     light-dark(#fdecec, #2f1a1a);
  --danger-border: light-dark(#f0b4b4, #6a3030);
  --danger-bar:    #c0392b;
  --danger-ink:    light-dark(#6b1f1f, #ffd0d0);
  --on-danger-bar: #ffffff;

  /* ---- Elevation, focus, overlay ---- */
  --shadow-sm: 0 1px 2px light-dark(rgb(16 43 56 / .06), rgb(0 0 0 / .35)), 0 1px 3px light-dark(rgb(16 43 56 / .06), rgb(0 0 0 / .25));
  --shadow-md: 0 14px 32px -14px light-dark(rgb(16 43 56 / .2), rgb(0 0 0 / .6)), 0 2px 6px light-dark(rgb(16 43 56 / .05), rgb(0 0 0 / .3));
  --shadow-lg: 0 30px 60px -24px light-dark(rgb(16 43 56 / .3), rgb(0 0 0 / .7)), 0 8px 18px -8px light-dark(rgb(16 43 56 / .1), rgb(0 0 0 / .4));
  --shadow-window: 0 50px 100px -30px rgb(0 16 22 / .8), 0 0 0 1px rgb(255 255 255 / .1), 0 0 90px -10px rgb(93 230 210 / .28);
  --shadow-glow: 0 10px 28px -8px rgb(62 227 211 / .6);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-ink);
  --focus-ring-band: 0 0 0 2px var(--midnight), 0 0 0 4px var(--bright);
  --scrim: light-dark(rgb(8 25 28 / .45), rgb(0 0 0 / .6));

  /* ---- Shape ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Type ---- */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --fs-display: clamp(2.5rem, 1.55rem + 3.3vw, 4.25rem);   /* 40 → 68px */
  --fs-h2: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem);      /* 30 → 44px */
  --fs-h3: clamp(1.125rem, 1.05rem + .3vw, 1.375rem);      /* 18 → 22px */
  --fs-lead: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);    /* 17 → 19px */
  --fs-sm: .875rem;
  --fs-xs: .75rem;

  /* ---- Space (4px base) & layout ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --section-y: clamp(72px, 4.5rem + 3vw, 128px);
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-enter: 700ms;
}

/* Mist — a softer light theme: mist page, near-white cards. */
:root[data-theme="mist"]:not(:has(.public-site)) {
  --bg: #eaf0f1;
  --surface: #f7fafb;
  --surface-2: #e1e9eb;
  --border: #d3dfe2;
  --border-strong: #bccdd2;
  --accent-soft: #d8ece9;
  --green: #186b4f;
  --orange: #8c5218;
}

/* Graphite — a neutral dark theme with teal accents instead of petrol surfaces. */
:root[data-theme="graphite"]:not(:has(.public-site)) {
  --bg: #0c1416;
  --surface: #121d20;
  --surface-2: #16252a;
  --ink: #e6efef;
  --ink-soft: #aec2c2;
  --ink-faint: #8fa3a3;
  --heading: #cfe7e6;
  --border: #213035;
  --border-strong: #324349;
  --accent-soft: #16252a;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-enter: 0ms; }
}