/*
  Design tokens. Everything visual in components.css / site.css reads from these variables, so the bank's real brand values can be
  dropped in here (and only here) when the demo is ported into the production application.

  The blues and reds are neutral retail-banking placeholders chosen for contrast, NOT official brand colours.
  Text colours are checked for WCAG AA (4.5:1) against the surfaces they sit on.
*/
:root {
  /* Brand */
  --color-primary: #004c8f;
  --color-primary-strong: #003a6d;
  --color-on-primary: #ffffff;
  --color-primary-soft: #e6f0fa;
  --color-accent: #c8161d;            /* used sparingly: alerts and emphasis, never for body text on tint */

  /* Surfaces and text */
  --color-bg: #f3f6f9;
  --color-surface: #ffffff;
  --color-surface-2: #eef2f6;
  --color-text: #14202b;
  --color-text-muted: #4d5d6c;         /* 6.4:1 on --color-bg */
  --color-border: #d3dbe3;
  --color-focus: #0a7cff;

  /* Status */
  --color-success: #17692f;
  --color-success-bg: #e7f6ec;
  --color-warning: #8a4b00;
  --color-warning-bg: #fff3dc;
  --color-danger: #b42318;
  --color-danger-bg: #fdecea;
  --color-info: #0b4f8a;
  --color-info-bg: #e6f0fa;

  /* Spacing scale (4-point base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape and depth */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 32, 48, .08), 0 1px 3px rgba(16, 32, 48, .06);
  --shadow-2: 0 4px 14px rgba(16, 32, 48, .14);

  /* Type scale */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .8125rem;   --leading-xs: 1.35;
  --text-sm: .9375rem;   --leading-sm: 1.45;
  --text-md: 1rem;       --leading-md: 1.5;
  --text-lg: 1.1875rem;  --leading-lg: 1.4;
  --text-xl: 1.4375rem;  --leading-xl: 1.3;
  --text-2xl: 1.75rem;   --leading-2xl: 1.2;

  /* Interaction */
  --touch-min: 44px;                    /* minimum size of anything tappable */
  --touch-comfort: 52px;                /* primary actions */
  --focus-ring: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-focus);
  --motion-fast: 120ms;
  --motion-base: 200ms;

  /* Layout */
  --page-max: 720px;
  --gutter: var(--space-4);
  --appbar-h: 56px;
  --bottomnav-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #4d9de0;
    --color-primary-strong: #7db6ea;
    --color-on-primary: #06223d;
    --color-primary-soft: #12304d;
    --color-accent: #ff8a80;
    --color-bg: #0e1419;
    --color-surface: #17202a;
    --color-surface-2: #1f2a36;
    --color-text: #e8eef3;
    --color-text-muted: #a9bac8;
    --color-border: #2c3a48;
    --color-focus: #7ab8ff;
    --color-success: #6fdc95;
    --color-success-bg: #12331f;
    --color-warning: #f5b25a;
    --color-warning-bg: #3a2a10;
    --color-danger: #ff9a90;
    --color-danger-bg: #3b1714;
    --color-info: #8cc4f5;
    --color-info-bg: #12304d;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, .55);
  }
}

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