/*
 * WISEcode Intelligence Design Tokens
 *
 * Source of truth for brand colors, type, spacing, radii and shadows.
 * Aligned with the ip-b2b design system (pages/aha.html + agent-page.css).
 *
 * NOTE: there is no token-generator/Tailwind build in this repo, so this file
 * is hand-maintained. Three layers must stay in sync when a brand value
 * changes: (1) these CSS variables, (2) the inline `tailwind.config` in
 * Components/App.razor (drives the CDN-generated utility classes), and
 * (3) the baked-in RGBs in design-system.css (the prod, CDN-less fallback).
 */

:root {
  /* Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  /* Brand primary — the aha.html blue (rgb 37 80 124). Replaces the legacy
     indigo/purple (was #3B3CE8). AAA as text on linen and as a white-on-fill button. */
  --color-primary: #25507C;
  /* Soft, translucent primary — the ip-b2b floating-nav hover/active tint (a
     tinted pill rather than a solid blue fill) AND the icon-disc fill. Matches
     the design's --primary-soft EXACTLY (agent-page.css). Reads on linen + white. */
  --color-primary-soft: rgba(37, 80, 124, 0.08);
  --color-secondary: #01D6C4;
  /* Linen surfaces (warm off-white) — replaces the cool lavender oyster tints.
     100 = page background (linen), 200 = subtle raised tint. Containers = white. */
  --color-oyster-100: #F9F8F3;
  --color-oyster-200: #F4F2EA;
  --color-oyster-300: #E0DBE7;
  --color-oyster-400: #B7B2C4;
  --color-oyster-500: #827C90;
  --color-oyster-600: #5D566A;
  --color-oyster-700: #413A4D;
  --color-oyster-800: #2C2439;
  --color-oyster-900: #1A102C;
  /* "indigo" ramp kept under its legacy name so existing utility/var refs keep
     working, but every step is now the brand blue scale (anchored on primary). */
  --color-indigo-100: #E7EEF5;
  --color-indigo-200: #CBD9E8;
  --color-indigo-300: #93AEC9;
  --color-indigo-400: #5C7FA5;
  --color-indigo-500: #25507C;
  --color-indigo-600: #1E4368;
  --color-indigo-700: #163450;
  --color-indigo-800: #0E2438;
  --color-mint-100: #E2FFFD;
  --color-mint-200: #BBFFF9;
  --color-mint-300: #76FFF4;
  --color-mint-400: #25F7E5;
  --color-mint-500: #01D6C4;
  --color-mint-600: #00B1A5;
  --color-mint-700: #008277;
  --color-mint-800: #005C53;
  --color-mint-900: #003E39;
  --color-berry-100: #FFD4FE;
  --color-berry-200: #F1A3F0;
  --color-berry-300: #D86DD7;
  --color-berry-400: #BB3BB9;
  --color-berry-500: #91148F;
  --color-berry-600: #71126F;
  --color-berry-700: #4F0F4E;
  --color-berry-800: #350F34;
  --color-berry-900: #270E26;
  --color-peach-100: #FFF2EC;
  --color-peach-200: #FFE5D8;
  --color-peach-300: #FFD3BE;
  --color-peach-400: #FFB68F;
  --color-peach-500: #FFA378;
  --color-peach-600: #F1753A;
  --color-peach-700: #BD4B14;
  --color-peach-800: #7E2B03;
  --color-peach-900: #4E1A00;
  --color-success-100: #E4FBF4;
  --color-success-200: #C2F6E6;
  --color-success-300: #9AEFD5;
  --color-success-400: #4EE0B7;
  /* Traffic-light green — design sec-green. */
  --color-success-500: #32A966;
  --color-success-600: #2A8F56;
  --color-success-700: #008962;
  --color-success-800: #006E4D;
  --color-success-900: #004433;
  --color-good-100: #F7FDEB;
  --color-good-200: #EAF9C9;
  --color-good-300: #D3F29B;
  --color-good-400: #BEEA6F;
  --color-good-500: #A4D64D;
  --color-good-600: #8ABA3E;
  --color-good-700: #709D32;
  --color-good-800: #547523;
  --color-good-900: #3A5218;
  --color-warning-100: #FFFAE5;
  --color-warning-200: #FFF4B8;
  --color-warning-300: #FFEB66;
  --color-warning-400: #FFE133;
  /* Traffic-light amber/yellow — design ter-amber. */
  --color-warning-500: #FFC434;
  --color-warning-600: #E6AC1E;
  --color-warning-700: #B89600;
  --color-warning-800: #8A6F00;
  --color-warning-900: #6A5500;
  --color-fair-100: #FFF3EA;
  --color-fair-200: #FFE0C4;
  --color-fair-300: #FFCE9C;
  --color-fair-400: #FFB66D;
  --color-fair-500: #FFA14A;
  --color-fair-600: #E68F3E;
  --color-fair-700: #B87330;
  --color-fair-800: #835018;
  --color-fair-900: #5C3B15;
  --color-danger-100: #FFEAEA;
  --color-danger-200: #FFC8C9;
  --color-danger-300: #FFA3A4;
  --color-danger-400: #FF7C7E;
  /* Traffic-light red — design sec-red. */
  --color-danger-500: #DC3038;
  --color-danger-600: #C02530;
  --color-danger-700: #A02C2D;
  --color-danger-800: #671A1B;
  --color-danger-900: #3E0F10;
  --color-gauge-excellent-500: #32A966;
  --color-gauge-good-500: #A4D64D;
  --color-gauge-ok-500: #FFC434;
  --color-gauge-fair-500: #FFA14A;
  --color-gauge-poor-500: #DC3038;

  /* AAA-safe ink for semantic colors used as TEXT on their own light tints
     (mirrors the design's --sec-*-text). Use for badges/deltas/status labels. */
  --color-success-text: #245E3B;
  --color-warning-text: #75360A;
  --color-danger-text: #831F23;

  /* UPF vs Non-UPF must read as DISTINCT colors (never blend the greens):
     Non-UPF = brand blue (verified), UPF = traffic-light red. */
  --color-nonupf: var(--color-primary);
  --color-upf: var(--color-danger-500);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-neg-xs: -4px;
  --spacing-neg-md: -12px;

  /* Font Family — DM Sans is the body face; Noto Serif is the display face for
     H1s, container/card headlines, primary buttons and large chart scores. */
  --font-family-primary: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;

  /* Font Sizes */
  --font-size-title-2xl-bold: 32;
  --font-size-title-xl-bold: 28;
  --font-size-title-l-bold: 24;
  --font-size-title-m-semibold: 22;
  --font-size-title-s-semibold: 20;
  --font-size-title-xs-semibold: 16;
  --font-size-body-l-bold: 20;
  --font-size-body-l-regular: 20;
  --font-size-body-m-bold: 16;
  --font-size-body-m-regular: 16;
  --font-size-body-s-semibold: 12;
  --font-size-body-s-regular: 12;
  --font-size-label-l-bold: 16;
  --font-size-label-l-bold-caps: 14;
  --font-size-label-m-semibold: 14;
  --font-size-label-m-semibold-caps: 12;
  --font-size-label-s-bold: 12;
  --font-size-label-s-bold-caps: 12;
  --font-size-label-s-regular: 12;
  --font-size-label-s-regular-caps: 12;
  --font-size-list-unordered: 16;
  --font-size-list-ordered: 16;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-s: 110%;
  --line-height-m: 120%;
  --line-height-l: 130%;

  /* Letter Spacing */
  --letter-spacing-tight: -0.25px;
  --letter-spacing-normal: 0px;
  --letter-spacing-loose: 0.25px;
  --letter-spacing-caps: 0.5px;
  --letter-spacing-extra-loose: 1px;

  /* Border Radius */
  --radius-sm: 4;
  --radius-lg: 8;
  --radius-xl: 16;

  /* Elevations (Box Shadows) */
  --elevation-none: none;
  --elevation-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --elevation-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  --elevation-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  --elevation-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
  --elevation-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
  --elevation-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Opacity */
  --opacity-low: 10%;
  --opacity-md: 50%;
  --opacity-high: 90%;

}