/* Valsight Design System — canonical brand tokens (Maria, Layer 1).
 *
 * SOURCE OF TRUTH. Vendored verbatim from
 *   designs/Layer1-DesignSystem/dist/valsight-tokens.css
 * which Style Dictionary builds from designs/Layer1-DesignSystem/valsight-tokens.json.
 * Do NOT hand-edit — change the token JSON and `npm run build`, then re-copy.
 *
 * The app binds to these via src/app/theme-bridge.css (semantic --vs-* roles) —
 * per Maria's rule: reference semantic tokens, not raw primitives (EXC-30 / CRC-9).
 */

:root {
  --color-blue-10: #e7eff8;
  --color-blue-30: #97b4f3;
  --color-blue-40: #3363ff; /** Bright accent blue */
  --color-blue-50: #2e54d3; /** Primary brand blue */
  --color-blue-60: #2947ab;
  --color-blue-70: #253c8b;
  --color-blue-80: #22326e; /** alias: valBlueDark */
  --color-blue-90: #1b1b61; /** Darkest blue. Promoted from a one-off used in the deep-blue gradient. */
  --color-teal-30: #82c9d1;
  --color-teal-40: #1bb2a2; /** Primary teal accent */
  --color-teal-50: #149085;
  --color-teal-60: #127a72;
  --color-teal-80: #244545; /** alias: valGreenDark */
  --color-purple-80: #2f2951; /** alias: valPurple / valPurpleDark */
  --color-orange-base: #db7b51;
  --color-yellow-base: #f1b63f;
  --color-functional-green: #238551;
  --color-functional-blue: #2d72d2; /** Info blue — distinct from brand blue.50 */
  --color-functional-amber: #c87619;
  --color-functional-red: #cd4246;
  --color-functional-grey: #5f6b7c;
  --color-grey-10: #f2f4f7; /** alias: valGreyLight */
  --color-grey-20: #e1e4ed;
  --color-grey-30: #d6d9e4;
  --color-grey-40: #c8ccda;
  --color-grey-50: #afb5c7;
  --color-grey-60: #9399ae;
  --color-grey-65: #838aa0;
  --color-grey-70: #757d94;
  --color-grey-75: #646d82; /** Body text color */
  --color-grey-80: #555e71;
  --color-grey-85: #414a5b;
  --color-grey-90: #343e4d; /** alias: valGreyDark */
  --color-grey-95: #26313e;
  --color-grey-05: #f7f8fb; /** Near-white surface. NOTE: site also has valGrey5=#f7f8fa — pick one. */
  --color-black: #131e29; /** Headings. Off-black, not pure #000. */
  --color-white: #ffffff;
  --gradient-brand: linear-gradient(100deg, #2e54d3 0%, #3363ff 40%, #1bb2a2 95%); /** PRIMARY signature gradient: blue50 -> blue40 -> teal40. The most brand-defining visual element on the site. */
  --gradient-blue-deep: linear-gradient(135deg, #1b1b61 0%, #2e54d3 50%, #253c8b 100%); /** Deep blue: blue90 -> blue50 -> blue70. */
  --gradient-teal: linear-gradient(100deg, #1bb2a2, #82c9d1);
  --gradient-teal-deep: linear-gradient(135deg, #1bb2a2 0%, #149085 100%);
  --font-brand: 'Helvetica Neue', 'Open Sans', -apple-system, system-ui, sans-serif; /** No web font is shipped — renders as a system font, so it varies across OS/devices. See decisions in README. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-weight-regular: 400; /** Body. Used inline on site but was NOT a named token — tokenized here. */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-display: 76px;
  --font-size-h1: 48px;
  --font-size-h2: 40px;
  --font-size-h3: 28px;
  --font-size-h4: 20px;
  --font-size-card: 18px;
  --font-size-body-lg: 17px;
  --font-size-body: 16px;
  --font-size-body-sm: 14px;
  --font-size-label: 12px;
  --line-height-tight: 1.3; /** Large headings */
  --line-height-snug: 1.4;
  --line-height-normal: 1.6; /** Body default */
  --line-height-relaxed: 1.7; /** Long-form prose */
  --letter-spacing-wide: 0.025em;
  --size-1: 4px;
  --size-2: 8px;
  --size-3: 12px;
  --size-4: 16px;
  --size-5: 20px;
  --size-6: 24px;
  --size-7: 28px;
  --size-9: 36px;
  --size-12: 48px;
  --size-16: 64px;
  --size-base: 4px;
  --radius-lg: 8px; /** Cards, panels, inputs */
  --radius-pill: 999px; /** Buttons, tags, chips */
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
  --semantic-color-brand-primary: #2e54d3;
  --semantic-color-brand-primary-hover: #2947ab;
  --semantic-color-brand-accent: #1bb2a2;
  --semantic-color-text-heading: #131e29;
  --semantic-color-text-body: #646d82;
  --semantic-color-text-muted: #838aa0;
  --semantic-color-text-on-brand: #ffffff;
  --semantic-color-text-link: #2e54d3;
  --semantic-color-surface-page: #ffffff;
  --semantic-color-surface-subtle: #f7f8fb;
  --semantic-color-surface-muted: #f2f4f7;
  --semantic-color-border-default: #e1e4ed;
  --semantic-color-border-strong: #d6d9e4;
  --semantic-color-status-success: #238551;
  --semantic-color-status-info: #2d72d2;
  --semantic-color-status-warning: #c87619;
  --semantic-color-status-error: #cd4246;
  --semantic-color-status-neutral: #5f6b7c;
}