/* =========================================================================
   PulseCore v2 — design tokens
   Excellence in Digital Banking 7.0 – International Summit
   The ONLY file in the v2 theme that is allowed to contain literal colour,
   size, shadow or timing values. Every component in theme.css consumes these.
   ========================================================================= */

:root {

  /* ---------------------------------------------------------------------
     Colour — deep navy/ink foundation, generous neutrals.
     The action colour is the PulseCore brand magenta (#ea0955).
     The "signal" blue is the brand colour configured in tbl_setting_theme
     (#3891ea) and is used only for thin data-inspired detail and focus.
     --------------------------------------------------------------------- */

  /* Ink / navy foundation */
  --v2-ink-900: #05091a;
  --v2-ink-850: #080f26;
  --v2-ink-800: #0b1530;
  --v2-ink-700: #111f42;
  --v2-ink-600: #1a2b56;
  --v2-ink-500: #2a3d6e;

  /* Neutrals / surfaces */
  --v2-white:      #ffffff;
  --v2-surface:    #ffffff;
  --v2-surface-2:  #f6f8fc;
  --v2-surface-3:  #eef2f8;
  --v2-surface-4:  #e4eaf4;

  /* Lines */
  --v2-line:            #dde4ef;
  --v2-line-strong:     #c4cfe1;
  --v2-line-on-dark:    rgba(255, 255, 255, 0.14);
  --v2-line-on-dark-2:  rgba(255, 255, 255, 0.26);

  /* Text */
  --v2-text:              #16203a;
  --v2-text-muted:        #515e7c;
  --v2-text-faint:        #71809d;
  --v2-text-invert:       #ffffff;
  --v2-text-invert-muted: #b9c4da;
  --v2-text-invert-faint: #8e9cba;

  /* Action — PulseCore magenta */
  --v2-accent:        #ea0955;
  --v2-accent-hover:  #c70746;
  --v2-accent-active: #a30538;
  --v2-accent-soft:   rgba(234, 9, 85, 0.10);
  --v2-accent-line:   rgba(234, 9, 85, 0.34);

  /* Signal — restrained electric blue for rules, ticks and focus */
  --v2-signal:       #3891ea;
  --v2-signal-soft:  rgba(56, 145, 234, 0.12);
  --v2-signal-line:  rgba(56, 145, 234, 0.40);

  /* Positive / neutral status */
  --v2-positive:      #0e7a52;
  --v2-positive-soft: rgba(14, 122, 82, 0.10);

  /* Tints — translucent white washes used on the ink surfaces */
  --v2-tint-1: rgba(255, 255, 255, 0.03);
  --v2-tint-2: rgba(255, 255, 255, 0.04);
  --v2-tint-3: rgba(255, 255, 255, 0.07);
  --v2-tint-4: rgba(255, 255, 255, 0.08);
  --v2-tint-5: rgba(255, 255, 255, 0.10);

  /* Overlays */
  --v2-overlay-hero:   linear-gradient(180deg, rgba(5, 9, 26, 0.82) 0%, rgba(5, 9, 26, 0.72) 45%, rgba(5, 9, 26, 0.92) 100%);
  --v2-overlay-media:  linear-gradient(180deg, rgba(5, 9, 26, 0.30) 0%, rgba(5, 9, 26, 0.86) 100%);
  --v2-overlay-flat:   rgba(8, 15, 38, 0.88);
  --v2-hairline-grad:  linear-gradient(90deg, rgba(234, 9, 85, 0.9) 0%, rgba(56, 145, 234, 0.7) 55%, rgba(56, 145, 234, 0) 100%);

  /* Focus ring */
  --v2-focus:         #3891ea;
  --v2-focus-on-dark: #ffffff;
  --v2-focus-width:   3px;
  --v2-focus-offset:  2px;

  /* ---------------------------------------------------------------------
     Typography — Work Sans (already loaded by the shared head)
     --------------------------------------------------------------------- */
  --v2-font-sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --v2-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --v2-fs-2xs:     0.6875rem;  /* 11px — eyebrow / meta                    */
  --v2-fs-xs:      0.75rem;    /* 12px                                     */
  --v2-fs-sm:      0.8125rem;  /* 13px — nav, chips                        */
  --v2-fs-base:    0.9375rem;  /* 15px — matches the site's body size      */
  --v2-fs-md:      1rem;       /* 16px                                     */
  --v2-fs-lg:      1.125rem;   /* 18px — lead paragraphs                   */
  --v2-fs-xl:      clamp(1.1875rem, 0.95rem + 0.7vw, 1.375rem);
  --v2-fs-2xl:     clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --v2-fs-3xl:     clamp(1.625rem, 1.25rem + 1.7vw, 2.25rem);
  --v2-fs-4xl:     clamp(1.875rem, 1.35rem + 2.5vw, 2.875rem);
  --v2-fs-display: clamp(1.875rem, 1.15rem + 3.4vw, 3.5rem);
  --v2-fs-numeric: clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem);

  --v2-lh-tight:   1.12;
  --v2-lh-snug:    1.28;
  --v2-lh-normal:  1.5;
  --v2-lh-relaxed: 1.68;

  --v2-fw-regular:  400;
  --v2-fw-medium:   500;
  --v2-fw-semibold: 600;
  --v2-fw-bold:     700;

  --v2-ls-tight:  -0.02em;
  --v2-ls-normal: 0;
  --v2-ls-wide:   0.04em;
  --v2-ls-caps:   0.12em;

  /* ---------------------------------------------------------------------
     Spacing — 4px base step
     --------------------------------------------------------------------- */
  --v2-sp-0:  0;
  --v2-sp-1:  0.25rem;   /*  4 */
  --v2-sp-2:  0.5rem;    /*  8 */
  --v2-sp-3:  0.75rem;   /* 12 */
  --v2-sp-4:  1rem;      /* 16 */
  --v2-sp-5:  1.25rem;   /* 20 */
  --v2-sp-6:  1.5rem;    /* 24 */
  --v2-sp-7:  2rem;      /* 32 */
  --v2-sp-8:  2.5rem;    /* 40 */
  --v2-sp-9:  3rem;      /* 48 */
  --v2-sp-10: 4rem;      /* 64 */
  --v2-sp-11: 5rem;      /* 80 */
  --v2-sp-12: 6rem;      /* 96 */

  /* Vertical rhythm for full-width sections */
  --v2-section-y:       clamp(3rem, 1.9rem + 4.4vw, 5.5rem);
  --v2-section-y-tight: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --v2-container:        1220px;
  --v2-container-narrow: 760px;
  --v2-gutter:           clamp(1rem, 0.55rem + 2vw, 2rem);
  --v2-grid-gap:         clamp(1rem, 0.7rem + 1.2vw, 1.75rem);

  /* Nav geometry — the drawer takes over below --v2-bp-nav */
  --v2-header-h:       68px;
  --v2-announce-h:     auto;
  --v2-tap:            44px;   /* minimum touch target */
  /* Logo. The brand mark is a stacked lock-up (~2.9:1), so it needs more
     height than a single-line wordmark to read at the same optical size.
     Header is 68px, so 44px leaves 12px clear above and below. */
  --v2-logo-h:         44px;
  --v2-logo-h-mobile:  34px;

  /* ---------------------------------------------------------------------
     Radii
     --------------------------------------------------------------------- */
  --v2-r-xs:   3px;
  --v2-r-sm:   6px;
  --v2-r-md:   10px;
  --v2-r-lg:   16px;
  --v2-r-xl:   24px;
  --v2-r-pill: 999px;

  /* ---------------------------------------------------------------------
     Elevation — restrained, never glowing
     --------------------------------------------------------------------- */
  --v2-sh-0: none;
  --v2-sh-1: 0 1px 2px rgba(11, 21, 48, 0.06), 0 1px 1px rgba(11, 21, 48, 0.04);
  --v2-sh-2: 0 2px 6px rgba(11, 21, 48, 0.07), 0 6px 18px rgba(11, 21, 48, 0.06);
  --v2-sh-3: 0 8px 28px rgba(11, 21, 48, 0.12), 0 2px 8px rgba(11, 21, 48, 0.07);
  --v2-sh-header: 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 24px rgba(5, 9, 26, 0.30);

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --v2-dur-1: 120ms;
  --v2-dur-2: 200ms;
  --v2-dur-3: 320ms;
  --v2-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --v2-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------------------------------------------------------------------
     Stacking
     --------------------------------------------------------------------- */
  --v2-z-base:      1;
  --v2-z-sticky:    100;
  --v2-z-header:    200;
  --v2-z-drawer:    300;
  --v2-z-dialog:    400;
  --v2-z-skiplink:  500;

  /* Aspect ratios used to reserve space and avoid layout shift */
  --v2-ar-speaker: 4 / 5;
  --v2-ar-media:   16 / 9;
  --v2-ar-card:    3 / 2;
}

/* Motion tokens collapse when the visitor asks for reduced motion, so every
   component that consumes them becomes still without needing its own rule. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --v2-dur-1: 0.01ms;
    --v2-dur-2: 0.01ms;
    --v2-dur-3: 0.01ms;
  }
}