/*
 * TLA Partner Hub design tokens — 0.9.15.
 *
 * These values follow the established TLA homepage and inherit the site's
 * semantic light/dark variables. Legacy aliases remain available so older
 * components resolve on-brand while they are progressively consolidated.
 */

:root {
  --tla-ph-pink: #df29d3;
  --tla-ph-blue: #0a90f6;
  --tla-ph-cyan: #17b2e2;
  --tla-ph-navy: #010012;
  --tla-ph-green: #00a060;
  --tla-ph-amber: #d07000;
  --tla-ph-red: #dc2626;

  --tla-ph-violet: #6e22ff;
  --tla-ph-purple: #6e22ff;
  --tla-ph-agent: #2c44a6;

  --tla-ph-bg: var(--tla-bg, #f7f7fc);
  --tla-ph-bg-alt: var(--tla-bg-alt, #ffffff);
  --tla-ph-surface: var(--tla-card, #ffffff);
  --tla-ph-soft: var(--tla-surface-soft, #f0f0f8);
  --tla-ph-heading: var(--tla-heading, #060614);
  --tla-ph-text: var(--tla-text, #0d0d1a);
  --tla-ph-muted: var(--tla-muted, #5a5a7a);
  --tla-ph-muted-light: var(--tla-muted-light, #9090b0);
  --tla-ph-border: var(--tla-card-border, rgba(10, 0, 50, 0.08));
  --tla-ph-divider: var(--tla-divider, rgba(10, 0, 50, 0.07));

  --tla-ph-shadow: 0 12px 36px rgba(10, 0, 50, 0.1);
  --tla-ph-shadow-lg: 0 20px 60px rgba(10, 0, 50, 0.12);
  --tla-ph-grad: linear-gradient(135deg, #df29d3 0%, #6e22ff 48%, #0a90f6 100%);
  --tla-ph-grad-tri: linear-gradient(135deg, #df29d3 0%, #6e22ff 42%, #0a90f6 70%, #17b2e2 100%);
  --tla-ph-grad-action: linear-gradient(135deg, #b91caf 0%, #5b18db 48%, #087acb 100%);
  --tla-ph-grad-blue: linear-gradient(135deg, #0a90f6 0%, #17b2e2 100%);
  --tla-ph-pastel-blue: linear-gradient(135deg, rgba(10, 144, 246, 0.075), rgba(23, 178, 226, 0.045));
  --tla-ph-pastel-violet: linear-gradient(135deg, rgba(223, 41, 211, 0.075), rgba(10, 144, 246, 0.045));
  --tla-ph-pastel-purple: var(--tla-ph-pastel-violet);
  --tla-ph-pastel-mix: linear-gradient(135deg, rgba(223, 41, 211, 0.06), rgba(10, 144, 246, 0.06));

  --tla-ph-radius-xs: 8px;
  --tla-ph-radius-sm: 12px;
  --tla-ph-radius: 18px;
  --tla-ph-radius-lg: 20px;
  --tla-ph-pill: 100px;

  --tla-ph-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tla-ph-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --tla-ph-display-xl: clamp(2.4rem, 5vw, 4rem);
  --tla-ph-display-lg: clamp(1.8rem, 3.5vw, 2.8rem);
  --tla-ph-heading-md: clamp(1rem, 2vw, 1.2rem);
  --tla-ph-lead: clamp(1rem, 2vw, 1.15rem);
  --tla-ph-body: 0.95rem;
  --tla-ph-body-lg: 1rem;
  --tla-ph-small: 0.8rem;
  --tla-ph-micro: 0.72rem;
  --tla-ph-line-height-body: 1.65;
  --tla-ph-line-height-tight: 1.2;
  --tla-ph-line-height-loose: 1.8;
  --tla-ph-letter-spacing: -0.01em;
  --tla-ph-letter-spacing-tight: -0.03em;

  --tla-ph-gap-xs: 0.5rem;
  --tla-ph-gap-sm: 0.85rem;
  --tla-ph-gap: 1.25rem;
  --tla-ph-gap-lg: 1.75rem;
  --tla-ph-gap-xl: 3rem;
  --tla-ph-wrap: 1200px;
  --tla-ph-wrap-wide: 1360px;
  --tla-ph-pad-x: 1.75rem;
  --tla-ph-space-1: 0.25rem;
  --tla-ph-space-2: 0.5rem;
  --tla-ph-space-3: 0.75rem;
  --tla-ph-space-4: 1rem;
  --tla-ph-space-5: 1.25rem;
  --tla-ph-space-6: 1.5rem;
  --tla-ph-space-7: 2rem;
  --tla-ph-space-8: 2.5rem;
  --tla-ph-space-9: 3rem;
  --tla-ph-ease: 0.2s ease;
}

html[data-tla-theme="dark"] {
  --tla-ph-bg: var(--tla-bg, #010012);
  --tla-ph-bg-alt: var(--tla-bg-alt, #0a0a18);
  --tla-ph-surface: var(--tla-card, #060720);
  --tla-ph-soft: var(--tla-surface-soft, rgba(255, 255, 255, 0.055));
  --tla-ph-heading: var(--tla-heading, #f8f8ff);
  --tla-ph-text: var(--tla-text, #e4e5f2);
  --tla-ph-muted: var(--tla-muted, #a0a0c0);
  --tla-ph-muted-light: var(--tla-muted-light, #8588a7);
  --tla-ph-border: var(--tla-card-border, rgba(255, 255, 255, 0.09));
  --tla-ph-divider: var(--tla-divider, rgba(255, 255, 255, 0.075));
  --tla-ph-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  --tla-ph-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
  --tla-ph-pastel-blue: linear-gradient(135deg, rgba(10, 144, 246, 0.13), rgba(23, 178, 226, 0.07));
  --tla-ph-pastel-violet: linear-gradient(135deg, rgba(223, 41, 211, 0.13), rgba(10, 144, 246, 0.07));
  --tla-ph-pastel-purple: var(--tla-ph-pastel-violet);
  --tla-ph-pastel-mix: linear-gradient(135deg, rgba(223, 41, 211, 0.11), rgba(10, 144, 246, 0.11));
}

@media (max-width: 640px) {
  :root {
    --tla-ph-pad-x: 1.125rem;
    --tla-ph-gap-xl: 2rem;
  }
}