/*
 * tokens.color.css — Prevu color tokens for InstaMortgage (btheme)
 * Source: "Prevu Color Tokens — Engineering Migration Spec" v1, 25 Sep 2026.
 * 38 tokens. This is the ONLY file in the theme allowed to contain raw color
 * literals (see scripts/check-color-tokens.sh). Load it before every other
 * theme stylesheet.
 *
 * Rules the tokens encode:
 *  - Lines split on interactivity: --line-default for static, --line-strong for clickable.
 *  - Semantic colors come in pairs: *500 for solid fills (white label), *600 for text.
 *  - Status tints (*-tint) sit on --surface only; never stack them on --surface-canvas.
 *  - --base-500 / --base-300 are chart/divider colors — never use them for text.
 */
:root {
  /* Text */
  --ink-primary:        #16181C;
  --ink-secondary:      #565C64;
  --ink-tertiary:       #8A9099;   /* only on --surface; step up to --ink-secondary on tinted grounds */
  --ink-inverse:        #FFFFFF;
  --ink-disabled:       #B8BDC4;

  /* Brand blue */
  --base-100:           #F0F6FC;
  --base-200:           #DCE9F6;
  --base-300:           #B1C8DF;
  --base-500:           #7EA5CD;
  --base-700:           #3C78B6;
  --base-800:           #1459A3;   /* the primary */
  --base-850:           #0C57A5;   /* footer background */
  --base-900:           #0A4E95;   /* hover / active / dark ground */

  /* Surfaces */
  --surface:            #FFFFFF;
  --surface-canvas:     #F5F6F8;
  --surface-band:       #F0F0F0;
  --surface-editorial:  #FAFCFF;
  --surface-skeleton:   #EEF1F4;

  /* Tints & lines (alpha — composite over whatever is behind) */
  --tint-soft:          rgba(20, 89, 163, 0.08);
  --tint-scrim:         rgba(20, 89, 163, 0.50);
  --line-default:       rgba(20, 25, 31, 0.09);
  --line-strong:        rgba(20, 25, 31, 0.15);
  --line-accent:        #B1C8DF;

  /* Action */
  --action-emphasis:     #F67804;
  --action-emphasis-ink: #16181C;  /* label on --action-emphasis; white fails AA (2.76:1) */

  /* Semantic */
  --success-600:        #1E7A5E;
  --success-tint:       rgba(30, 122, 94, 0.10);
  --warn-400:           #F89942;
  --warn-600:           #8A4B06;
  --warn-tint:          rgba(248, 153, 66, 0.12);
  --alert-500:          #DC2F2E;
  --alert-600:          #B51F1E;
  --alert-tint:         rgba(220, 47, 46, 0.10);

  /* Overlay / on-dark */
  --overlay-scrim:      rgba(0, 0, 0, 0.55);
  --overlay-full:       rgba(0, 0, 0, 0.90);
  --surface-frosted:    rgba(255, 255, 255, 0.92);
  --line-on-dark:       rgba(255, 255, 255, 0.60);
  --tint-on-dark:       rgba(255, 255, 255, 0.14);

  /* Brand mark — logo SVG only */
  --brand-mark:         #6A489A;
}