/*
 * Design tokens. Every colour, space, size and duration in the app resolves to one of
 * these; components never hardcode a value.
 *
 * Region hues are identity, not decoration: operating on the wrong region is the one
 * unrecoverable mistake in this product, so India and US each get a distinct hue that is
 * deliberately outside the semantic red/amber/green range, so it can never be misread as
 * a success or failure signal.
 */
:root {
  /* surfaces and lines */
  --bg: #ffffff;
  --surface: #f6f7f9;
  --surface-raised: #ffffff;
  --border: #d9dde3;
  --border-strong: #888f99;   /* 3.26:1 on bg, 3.04:1 on surface -- control borders need 3:1 */

  /* text */
  --text: #14181d;
  --text-muted: #59616d;
  --text-on-primary: #ffffff;
  --text-on-region: #ffffff;

  /* action accent */
  --primary: #1d4ed8;
  --primary-hover: #1739a8;
  --primary-subtle: #e8eeff;

  /* semantic */
  --success: #146c43;  --success-subtle: #e4f2ea;
  --warning: #8a5300;  --warning-subtle: #fdf0dc;
  --danger:  #b3261e;  --danger-subtle:  #fbe9e8;
  --info:    #0b5c8f;  --info-subtle:    #e6f0f8;

  /* region identity */
  --region-in: #4338ca;
  --region-us: #0f766e;
  --region: var(--region-in);

  --focus-ring: 0 0 0 3px rgba(29, 78, 216, .38);

  /* spacing: 4px base grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* type */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px;
  --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px;
  --lh-body: 1.5; --lh-heading: 1.25;
  --fw-normal: 400; --fw-semi: 600;

  /* shape */
  --radius-sm: 4px; --radius-md: 8px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 29, .08);
  --shadow-md: 0 6px 20px rgba(20, 24, 29, .12);

  /* motion */
  --t-fast: 150ms; --t-base: 200ms; --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* layout */
  --shell-max: 1200px;
  --control-h: 44px;
  --control-h-desktop: 40px;
}

/* The region hue is set once on <body> and inherited by every region-aware component. */
body[data-region="India"] { --region: var(--region-in); }
body[data-region="US"]    { --region: var(--region-us); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}