/* Kinnect digital expression — shared tokens
   Upstream: portal-design-system.html v2.5.0 (2026-07-21)
   Promoted: 2026-08-07
   Import this in every Kinnect web surface.
   Does NOT include layout or component styles — see kinnect-portal-shell.css for those.
*/

:root {
      color-scheme: light;

      /* Kinnect primitives: shared with the mobile token contract. */
      --kp-neutral-00: #ffffff;
      --kp-neutral-50: #f9f8f7;
      --kp-neutral-100: #f2f0ee;
      --kp-neutral-200: #e5e1de;
      --kp-neutral-300: #d3ccc6;
      --kp-neutral-400: #b9b0a8;
      --kp-neutral-500: #978d84;
      --kp-neutral-600: #756c63;
      --kp-neutral-700: #5a524a;
      --kp-neutral-800: #403a34;
      --kp-neutral-900: #2a2622;
      --kp-neutral-950: #171412;
      --kp-neutral-1000: #000000;
      --kp-brand-50: #fff1eb;
      --kp-brand-100: #ffe0d1;
      --kp-brand-300: #ffa179;
      --kp-brand-400: #ff7b47;
      --kp-brand-500: #ff4800;
      --kp-brand-600: #e63e00;
      --kp-brand-700: #c73400;
      --kp-brand-800: #a92b00;
      --kp-brand-900: #7a1f00;
      --kp-brand-gradient-start: #ff6326;
      --kp-brand-gradient-end: #ff4800;
      --kp-gold-50: #fef7e6;
      --kp-gold-500: #f2af00;
      --kp-gold-800: #966c00;
      --kp-gold-900: #745400;
      --kp-gold-950: #4d3800;
      --kp-teal-50: #e6f3f4;
      --kp-teal-300: #75bec3;
      --kp-teal-700: #00676d;
      --kp-teal-950: #002b2e;
      --kp-blue-50: #e6edf6;
      --kp-blue-300: #759ccf;
      --kp-blue-700: #00367f;
      --kp-blue-950: #001735;
      --kp-info-50: #eff4ff;
      --kp-info-300: #8eb4ff;
      --kp-info-600: #0055ff;
      --kp-info-800: #003399;
      --kp-success-50: #eafbf1;
      --kp-success-200: #9becc2;
      --kp-success-600: #00ad47;
      --kp-success-800: #006d2c;
      --kp-warning-50: #fff8e8;
      --kp-warning-200: #ffe08f;
      --kp-warning-700: #b57100;
      --kp-warning-900: #6a4200;
      --kp-error-50: #ffecef;
      --kp-error-200: #ffa8b7;
      --kp-error-600: #e00033;
      --kp-error-800: #910022;

      /* Semantic colour roles. Use these in product CSS. */
      --kp-bg-app: var(--kp-neutral-50);
      --kp-bg-surface: var(--kp-neutral-00);
      --kp-bg-subtle: var(--kp-neutral-100);
      --kp-bg-sunken: #efedea;
      --kp-bg-raised: var(--kp-neutral-00);
      --kp-bg-overlay: var(--kp-neutral-00);
      --kp-text-primary: var(--kp-neutral-900);
      --kp-text-secondary: var(--kp-neutral-700);
      --kp-text-tertiary: var(--kp-neutral-600);
      --kp-text-on-accent: var(--kp-neutral-50);
      --kp-border-subtle: var(--kp-neutral-200);
      --kp-border-default: var(--kp-neutral-300);
      --kp-border-strong: var(--kp-neutral-500);
      --kp-accent: var(--kp-brand-500);
      --kp-accent-hover: var(--kp-brand-600);
      --kp-accent-pressed: var(--kp-brand-700);
      --kp-accent-soft: var(--kp-brand-50);
      --kp-action-primary: var(--kp-brand-500);
      --kp-action-primary-hover: var(--kp-brand-600);
      --kp-action-primary-pressed: var(--kp-brand-700);
      --kp-action-brand-start: var(--kp-brand-gradient-start);
      --kp-action-brand-end: var(--kp-brand-gradient-end);
      --kp-action-brand-text: var(--kp-neutral-50);
      --kp-action-ink-bg: var(--kp-neutral-950);
      --kp-action-ink-hover: var(--kp-neutral-900);
      --kp-action-ink-text: var(--kp-neutral-50);
      --kp-focus: var(--kp-info-600);
      --kp-selection: var(--kp-brand-100);
      --kp-link: #004fd6;
      --kp-success-bg: var(--kp-success-50);
      --kp-success-border: var(--kp-success-200);
      --kp-success-text: var(--kp-success-800);
      --kp-warning-bg: var(--kp-warning-50);
      --kp-warning-border: var(--kp-warning-200);
      --kp-warning-text: var(--kp-warning-900);
      --kp-error-bg: var(--kp-error-50);
      --kp-error-border: var(--kp-error-200);
      --kp-error-text: var(--kp-error-800);
      --kp-info-bg: var(--kp-info-50);
      --kp-info-border: #b7d0ff;
      --kp-info-text: var(--kp-info-800);
      --kp-brand-warmth: var(--kp-gold-900);
      --kp-brand-warmth-soft: var(--kp-gold-50);
      --kp-brand-connection: var(--kp-teal-700);
      --kp-brand-connection-soft: var(--kp-teal-50);
      --kp-brand-insight: var(--kp-blue-700);
      --kp-brand-insight-soft: var(--kp-blue-50);
      --kp-data-focal: var(--kp-brand-600);
      --kp-data-compare: var(--kp-teal-700);
      --kp-data-evidence: var(--kp-blue-700);
      --kp-data-baseline: var(--kp-neutral-400);
      --kp-media-paper: #f7f1eb;
      --kp-media-ink: var(--kp-neutral-950);
      --kp-overlay: rgba(42, 38, 34, .38);

      /* Type, space and shape. Productive sans + rare expressive serif. */
      --kp-font-productive: "Nunito Sans", Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --kp-font-expressive: Fraunces, Iowan Old Style, Baskerville, Georgia, serif;
      --kp-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      --kp-text-xs: .75rem;
      --kp-text-sm: .875rem;
      --kp-text-md: 1rem;
      --kp-text-lg: 1.25rem;
      --kp-text-xl: 1.75rem;
      --kp-text-display: clamp(2.5rem, 2.25rem + 1vw, 3rem);
      --kp-type-caption-size: var(--kp-text-xs);
      --kp-type-body-small-size: var(--kp-text-sm);
      --kp-type-body-size: var(--kp-text-md);
      --kp-type-heading-size: var(--kp-text-lg);
      --kp-type-title-size: var(--kp-text-xl);
      --kp-type-display-size: var(--kp-text-display);
      --kp-leading-display: 1.1;
      --kp-leading-tight: 1.14;
      --kp-leading-body: 1.6;
      --kp-space-1: .25rem;
      --kp-space-2: .5rem;
      --kp-space-3: .75rem;
      --kp-space-4: 1rem;
      --kp-space-5: 1.25rem;
      --kp-space-6: 1.5rem;
      --kp-space-8: 2rem;
      --kp-space-10: 2.5rem;
      --kp-space-12: 3rem;
      --kp-space-16: 4rem;
      --kp-space-20: 5rem;
      --kp-radius-s: .5rem;
      --kp-radius-m: .75rem;
      --kp-radius-l: 1rem;
      --kp-radius-full: 999px;
      --kp-shadow-raised: 0 1px 2px rgba(42, 38, 34, .06), 0 12px 30px rgba(42, 38, 34, .07);
      --kp-shadow-overlay: 0 24px 70px rgba(42, 38, 34, .2);
      --kp-duration-fast: 120ms;
      --kp-duration-base: 180ms;
      --kp-duration-scene: 520ms;
      --kp-ease: cubic-bezier(.2, 0, 0, 1);
      --kp-ease-expressive: cubic-bezier(.16, 1, .3, 1);
      --kp-shell-max: 90rem;
      --kp-reading-max: 46rem;
      --kp-content-max: 72rem;
      --kp-rail-width: 15rem;
    }

html[data-theme="dark"] {
      color-scheme: dark;
      --kp-bg-app: var(--kp-neutral-1000);
      --kp-bg-surface: var(--kp-neutral-950);
      --kp-bg-subtle: #211e1b;
      --kp-bg-sunken: #100e0d;
      --kp-bg-raised: var(--kp-neutral-900);
      --kp-bg-overlay: var(--kp-neutral-800);
      --kp-text-primary: var(--kp-neutral-50);
      --kp-text-secondary: var(--kp-neutral-300);
      --kp-text-tertiary: var(--kp-neutral-400);
      --kp-border-subtle: #2f2b27;
      --kp-border-default: var(--kp-neutral-800);
      --kp-border-strong: var(--kp-neutral-700);
      --kp-accent: var(--kp-brand-400);
      --kp-accent-hover: var(--kp-brand-300);
      --kp-accent-pressed: var(--kp-brand-500);
      --kp-accent-soft: #35170c;
      --kp-action-primary: var(--kp-brand-500);
      --kp-action-primary-hover: var(--kp-brand-600);
      --kp-action-primary-pressed: var(--kp-brand-700);
      --kp-action-brand-start: var(--kp-brand-gradient-start);
      --kp-action-brand-end: var(--kp-brand-gradient-end);
      --kp-action-brand-text: var(--kp-neutral-50);
      --kp-action-ink-bg: var(--kp-neutral-50);
      --kp-action-ink-hover: var(--kp-neutral-200);
      --kp-action-ink-text: var(--kp-neutral-950);
      --kp-focus: var(--kp-info-300);
      --kp-selection: var(--kp-brand-900);
      --kp-link: #9bbcff;
      --kp-success-bg: #092a18;
      --kp-success-border: #146232;
      --kp-success-text: var(--kp-success-200);
      --kp-warning-bg: #322308;
      --kp-warning-border: #6e4b08;
      --kp-warning-text: var(--kp-warning-200);
      --kp-error-bg: #350b14;
      --kp-error-border: #701728;
      --kp-error-text: var(--kp-error-200);
      --kp-info-bg: #0b1d3c;
      --kp-info-border: #203e78;
      --kp-info-text: #b7d0ff;
      --kp-brand-warmth: #fae19e;
      --kp-brand-warmth-soft: var(--kp-gold-950);
      --kp-brand-connection: var(--kp-teal-300);
      --kp-brand-connection-soft: var(--kp-teal-950);
      --kp-brand-insight: var(--kp-blue-300);
      --kp-brand-insight-soft: var(--kp-blue-950);
      --kp-data-focal: var(--kp-brand-400);
      --kp-data-compare: var(--kp-teal-300);
      --kp-data-evidence: var(--kp-blue-300);
      --kp-data-baseline: var(--kp-neutral-700);
      --kp-media-paper: #211e1b;
      --kp-media-ink: var(--kp-neutral-50);
      --kp-overlay: rgba(0, 0, 0, .64);
      --kp-shadow-raised: 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px rgba(0, 0, 0, .24);
      --kp-shadow-overlay: 0 28px 90px rgba(0, 0, 0, .52);
    }