/* Linxa Design System v0.1
 * Components consume the semantic --color-* layer only. Primitive values stay
 * here so a theme can be changed without rewriting component templates.
 */
:root {
  --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2343434b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* App Brand Pass — semantic identity, action and navigation roles. */
  --weight-display: 800;
  --weight-metric: 800;
  --weight-heading: 700;
  --weight-control: 600;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --color-brand-blue: #0a66c2;
  --color-action-primary: #111114;
  --color-action-primary-hover: #2a2a30;
  --color-on-action: #ffffff;
  --color-nav-selected: #f6f2ef;
  --color-nav-text: #111114;
  --color-nav-hover: #f6f2ef;
  --color-gradient-start: #ec5a6e;
  --color-gradient-middle: #f0a03c;
  --color-gradient-end: #a85be0;
  --background-brand-gradient: linear-gradient(90deg, var(--color-gradient-start), var(--color-gradient-middle) 45%, var(--color-gradient-end));
  --background-brand-gradient-vertical: linear-gradient(180deg, var(--color-gradient-start), var(--color-gradient-middle) 50%, var(--color-gradient-end));
  --color-bg-selected: #fff3ea;
  --color-note-bg: #fff8d6;
  --color-note-text: #5b4a12;

  /* Onboarding brand treatment from the approved HTML reference. */
  --color-onboarding-canvas: #fbf8f6;
  --color-onboarding-glow: #f6c87859;
  --color-onboarding-blush: #ec5a6e24;
  --color-onboarding-display-start: #bd3855;
  --color-onboarding-display-middle: #9b570c;
  --color-onboarding-display-end: #9250b9;
  --color-onboarding-action: #111114;
  --color-onboarding-action-hover: #2a2a30;
  --color-onboarding-on-action: #ffffff;
  --color-onboarding-identity: #2451c9;
  --color-onboarding-on-identity: #ffffff;
  --color-onboarding-review: #fdf1ea;
  --color-onboarding-sticker: #f6e05a;
  --color-onboarding-on-sticker: #252016;
  /* Shared restrained page wash for authentication and result overviews. */
  --background-brand-wash: radial-gradient(ellipse 900px 420px at 90% 0,var(--color-onboarding-glow),transparent 60%),radial-gradient(ellipse 800px 380px at 0 0,var(--color-onboarding-blush),transparent 60%),var(--color-onboarding-canvas);
  /* ICP fit bands are independent of delivery/error status colors. */
  --color-icp-high-bg: #dcf4e7;
  --color-icp-low-bg: #fbe2ea;
  --color-icp-medium-bg: #e6e8ec;
  --color-icp-unknown-bg: #f5f6f8;
  /* Lifecycle email hero wash, adapted from the marketing homepage. */
  --color-email-hero-start: #fff5f1;
  --color-email-hero-end: #f6e7ee;
  --color-email-hero-glow: #f9d98e;
  --color-email-ink: #15161c;
  --color-email-highlight: #5048a9;
  /* Approved campaign treatment, consumed only by the Team Insights page. */
  --color-team-insights-hero-start: #fff4ee;
  --color-team-insights-hero-end: #f9bacd;
  --color-team-insights-hero-glow: #ffdc84;
  --color-team-insights-display-start: #ca2f52;
  --color-team-insights-display-middle: #9f5600;
  --color-team-insights-display-end: #9250b9;
  --color-team-insights-poster-border: #17171e;
  --color-team-insights-sticker-bg: #f9e448;
  --color-team-insights-sticker-text: #17171e;
  --color-team-insights-text-secondary: #514654;
  --color-team-insights-link-text: #403b82;
  --violet-50: #f7f6ff;
  --violet-100: #efedff;
  --violet-200: #ddd9ff;
  --violet-300: #c2bcf5;
  --violet-400: #a59deb;
  --violet-500: #7f77dd;
  --violet-600: #665ccb;
  --violet-700: #5048a9;
  --violet-800: #403b82;
  --violet-900: #37346b;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  --green-500: #2f9a76;
  --red-500: #c44545;
  --orange-500: #ef9f27;
  --purple-500: #8b5cf6;

  /* Invitation callout: peach wash with theme-specific contrast. */
  --color-bg-invitation-start: #fde6e5;
  --color-bg-invitation-end: #fbd5c8;
  --color-bg-canvas: #fbf8f6;
  --color-bg-surface: #ffffff;
  --color-bg-subtle: #f6f2ef;
  --color-bg-hover: #f0eae5;

  --color-text-primary: #111114;
  --color-text-secondary: #43434b;
  --color-text-muted: #716a73;
  --color-text-inverse: #ffffff;

  --color-border-subtle: #ece6e1;
  --color-border-default: #d8cfc7;
  --color-border-strong: #b6aaa0;

  --color-accent: #2f5bea;
  --color-accent-hover: #2348c6;
  --color-accent-soft: #eef2fe;
  --color-accent-text: #2451c9;

  --color-success: var(--green-500);
  --color-success-text: #21664e;
  --color-success-soft: rgba(47, 154, 118, 0.12);
  --color-warning: var(--orange-500);
  --color-warning-soft: rgba(239, 159, 39, 0.14);
  --color-danger: var(--red-500);
  --color-danger-soft: rgba(196, 69, 69, 0.1);
  --color-info: var(--purple-500);
  --color-info-soft: rgba(139, 92, 246, 0.12);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --color-overlay-backdrop: #10121980;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);

  --type-display-size: 34px;
  --type-display-line: 1.2;
  --type-title-size: 24px;
  --type-title-line: 1.25;
  --type-section-size: 18px;
  --type-section-line: 1.35;
  --type-body-size: 15px;
  --type-body-line: 1.5;
  --type-label-size: 14px;
  --type-label-line: 1.4;
  --type-caption-size: 12px;
  --type-caption-line: 1.4;

  --type-control-size: 14px;
  --type-metadata-size: 11px;
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 44px;
  --space-12: 48px;
  --card-padding: 20px;
  --border-width: 0.5px;
  --color-border-tertiary: var(--color-border-subtle);
  --color-border-secondary: var(--color-border-default);
  --color-on-accent: #ffffff;
  --color-warning-text: #854f0b;
  --color-activity: #5dcaa5;
  --color-chart-primary: #7f77dd;
  --color-chart-secondary: #5dcaa5;
  /* Categorical chart lines: stable member mapping, distinct from status colors. */
  --color-chart-series-1: #7064c4;
  --color-chart-series-2: #16866f;
  --color-chart-series-3: #2879b9;
  --color-chart-series-4: #966218;
  --color-chart-series-5: #b64e83;
  --color-chart-series-6: #247e8e;
  --sidebar-width-expanded: 248px;
  --sidebar-width-collapsed: 72px;
  --panel-width-list: 320px;
  --panel-width-detail-min: 360px;
  --panel-width-drawer: 350px;
  --layer-navigation: 30;
  --layer-drawer: 90;
  --layer-dialog: 10020;
  --layer-toast: 11000;
}

[data-theme="dark"] {
  --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23c8c0ca' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --color-brand-blue: #abc5ff;
  --color-action-primary: #f1edf4;
  --color-action-primary-hover: #dcd4e4;
  --color-on-action: #19161b;
  --color-nav-selected: #302b30;
  --color-nav-text: #f4f0f4;
  --color-nav-hover: #302b30;
  --color-bg-selected: #352922;
  --color-note-bg: #342e1b;
  --color-note-text: #f4e4a7;
  --color-icp-high-bg: #19392d;
  --color-icp-low-bg: #482b39;
  --color-icp-medium-bg: #343842;
  --color-icp-unknown-bg: #23262e;
  --color-onboarding-canvas: #171519;
  --color-onboarding-glow: #58402770;
  --color-onboarding-blush: #512b4066;
  --color-onboarding-display-start: #ff8199;
  --color-onboarding-display-middle: #ffb45e;
  --color-onboarding-display-end: #d998f2;
  --color-onboarding-action: #f1edf4;
  --color-onboarding-action-hover: #dcd4e4;
  --color-onboarding-on-action: #19161b;
  --color-onboarding-identity: #abc5ff;
  --color-onboarding-on-identity: #16264b;
  --color-onboarding-review: #30231f;

  --color-chart-series-1: #aaa1f5;
  --color-chart-series-2: #5dcaa5;
  --color-chart-series-3: #72b8ef;
  --color-chart-series-4: #e9b95f;
  --color-chart-series-5: #e58fbb;
  --color-chart-series-6: #65c5d5;
  --color-email-hero-start: #222632;
  --color-email-hero-end: #37346b;
  --color-email-hero-glow: #403b82;
  --color-email-ink: #f1f3f8;
  --color-email-highlight: #ddd9ff;
  --color-team-insights-hero-start: #19161b;
  --color-team-insights-hero-end: #512b40;
  --color-team-insights-hero-glow: #584027;
  --color-team-insights-display-start: #ff8199;
  --color-team-insights-display-middle: #ffb45e;
  --color-team-insights-display-end: #d998f2;
  --color-team-insights-text-secondary: #dacbd6;
  --color-team-insights-link-text: #c2bcf5;
  --color-bg-invitation-start: #35282b;
  --color-bg-invitation-end: #402d28;
  --color-bg-canvas: #171519;
  --color-bg-surface: #211e23;
  --color-bg-subtle: #2b272d;
  --color-bg-hover: #353038;

  --color-text-primary: #f4f0f4;
  --color-text-secondary: #bfb6bf;
  --color-text-muted: #a69ca7;
  --color-text-inverse: #ffffff;

  --color-border-subtle: rgba(255, 255, 255, 0.1);
  --color-border-default: rgba(255, 255, 255, 0.16);
  --color-border-strong: rgba(255, 255, 255, 0.24);

  --color-accent: #abc5ff;
  --color-accent-hover: #d2dfff;
  --color-accent-soft: #253351;
  --color-accent-text: #abc5ff;
  --color-on-accent: #16264b;

  --color-success: #72d6b5;
  --color-success-text: #72d6b5;
  --color-success-soft: rgba(93, 202, 165, 0.16);
  --color-warning: #f1b75e;
  --color-warning-soft: rgba(239, 159, 39, 0.18);
  --color-danger: #ef8e8e;
  --color-danger-soft: rgba(239, 142, 142, 0.16);
  --color-info: #b9a0ff;
  --color-info-soft: rgba(139, 92, 246, 0.18);
  --color-warning-text: #f1b75e;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.36);
}