/* PXLTAB Design System DS 1.3.1 — canonical landing-page foundations.
   Components consume semantic or compatibility aliases from this file.
   Breakpoint roles: base, 600px, 900px, 1280px, 1600px. */

:root {
  color-scheme: light;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --type-display: clamp(2rem, calc(1.463rem + 2.716vw), 4.75rem);
  --type-page-title: clamp(2.125rem, calc(1.375rem + 2.08vw), 4.25rem);
  --type-section-title: clamp(1.75rem, calc(1.25rem + 1.5vw), 3.5rem);
  --type-subsection-title: 1.375rem;
  --type-card-title: 1.125rem;
  --type-body-large: 1.125rem;
  --type-hero-supporting: clamp(1rem, calc(0.806rem + 0.795vw), 1.125rem);
  --type-body: 1rem;
  --type-supporting: 0.9375rem;
  --type-body-small: 0.875rem;
  --type-caption: 0.875rem;
  --type-control: 0.875rem;
  --type-control-large: 0.9375rem;
  --type-min-readable: 0.625rem;
  --line-display: 1.06;
  --line-heading: 1.16;
  --line-body: 1.6;
  --line-reading: 1.7;
  --line-small: 1.5;
  --tracking-display: -0.04em;
  --tracking-heading: -0.03em;
  --tracking-body: -0.01em;
  --measure-reading: 68ch;

  /* Light semantic color roles */
  --color-canvas: #F7F7F8;
  --color-canvas-subtle: #F0F0F2;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text-primary: #0B0B0C;
  --color-text-secondary: #3D3D43;
  --color-text-muted: #62626B;
  --color-text-subtle: #686872;
  --color-text-inverse: #FFFFFF;
  --color-border-subtle: #E6E6E9;
  --color-border-default: #D7D7DB;
  --color-border-strong: #8B8B95;
  --color-focus: #3157D5;
  --color-selection: #EAF1FF;
  --color-success: #0B7657;
  --color-success-surface: #E7F7F1;
  --color-warning: #7A4500;
  --color-warning-surface: #FFF2D5;
  --color-error: #A62820;
  --color-error-surface: #FDECEA;
  --color-info: #174EA6;
  --color-info-surface: #EAF1FF;
  --color-interactive-hover: #F0F0F2;
  --color-interactive-active: #E6E6E9;

  /* Brand */
  --brand-blue: #176CFF;
  --brand-violet: #713CFF;
  --brand-teal: #12A67B;
  --brand-cyan: #4CC9F0;
  --brand-indigo: #4361EE;
  --brand-mint: #3AF2B0;

  /* Canonical PXLTAB lockup hierarchy. The square app mark is intentionally
     one optical step taller than the wide wordmark, never twice its height. */
  --brand-lockup-header-icon-height: 1.75rem;
  --brand-lockup-header-wordmark-height: 1.125rem;
  --brand-lockup-auth-icon-height: 2.75rem;
  --brand-lockup-auth-wordmark-height: 1.125rem;
  --brand-lockup-footer-icon-height: 2rem;
  --brand-lockup-footer-wordmark-height: 1.25rem;
  --brand-lockup-loader-icon-height: clamp(1.75rem, 4.9vw, 2.75rem);
  --brand-lockup-loader-wordmark-height: clamp(1.125rem, 3.15vw, 1.75rem);
  --brand-lockup-gap: 0.5rem;
  --brand-lockup-footer-gap: 0.6rem;
  --brand-lockup-loader-gap: clamp(0.6rem, 1.6vw, 0.8rem);

  /* Spacing: 4px base */
  --space-0: 0;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-0: 0;
  --radius-1: 0.25rem;
  --radius-2: 0.5rem;
  --radius-3: 0.75rem;
  --radius-4: 1rem;
  --radius-5: 1.5rem;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Elevation */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(11,11,12,0.05), 0 8px 24px rgba(11,11,12,0.06);
  --elevation-2: 0 4px 12px rgba(11,11,12,0.08), 0 16px 40px rgba(11,11,12,0.10);
  --elevation-3: 0 12px 28px rgba(11,11,12,0.12), 0 28px 72px rgba(11,11,12,0.14);
  --elevation-4: 0 24px 64px rgba(11,11,12,0.18), 0 40px 120px rgba(11,11,12,0.16);

  /* Motion */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-standard: 200ms;
  --duration-emphasized: 300ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layout and controls */
  --container-page: 73.75rem;
  --container-wide: 82.5rem;
  --container-content: 60rem;
  --page-gutter: 1rem;
  --content-inline-space: 2rem;
  --target-web: 2.75rem;
  --control-padding-block: 0.75rem;
  --control-padding-inline: 1.375rem;
  --control-large-padding-block: 0.875rem;
  --control-large-padding-inline: 1.625rem;

  /* Action components */
  --action-height-compact: 2.75rem;
  --action-height-standard: 3rem;
  --action-height-large: 3.5rem;
  --menu-row-height: var(--action-height-standard);
  --type-menu-description: 0.625rem;
  --action-gap: 0.5rem;
  --action-primary-bg: #0B0B0C;
  --action-primary-bg-hover: #26262A;
  --action-primary-bg-active: #000000;
  --action-primary-text: #FFFFFF;
  --action-primary-border: #0B0B0C;
  --action-secondary-bg: #FFFFFF;
  --action-secondary-bg-hover: #F7F7F8;
  --action-secondary-bg-active: #F0F0F2;
  --action-secondary-text: #0B0B0C;
  --action-secondary-border: #D7D7DB;
  --action-outline-bg: transparent;
  --action-outline-bg-hover: #F0F0F2;
  --action-outline-bg-active: #E6E6E9;
  --action-outline-text: #0B0B0C;
  --action-outline-border: #D7D7DB;
  --action-ghost-bg-hover: #F0F0F2;
  --action-ghost-bg-active: #E6E6E9;
  --action-danger-bg: #FDECEA;
  --action-danger-bg-hover: #F9D9D5;
  --action-danger-bg-active: #F3C6C0;
  --action-danger-text: #A62820;
  --action-danger-border: #E8B4AE;
  --action-inverse-bg: #FFFFFF;
  --action-inverse-bg-hover: #EFEFF1;
  --action-inverse-bg-active: #DDE3EE;
  --action-inverse-text: #0B0B0C;
  --action-standard-hover-border: rgba(75, 76, 189, 0.38);
  --action-standard-hover-ring: rgba(75, 76, 189, 0.12);
  --action-disabled-bg: #ECECEE;
  --action-disabled-text: #686871;
  --action-disabled-border: #D7D7DB;
  --action-spinner-track: rgba(255, 255, 255, 0.34);
  --action-spinner-head: currentColor;
  --action-generation-gradient: linear-gradient(110deg, #044940 0%, #0B4050 48%, #312367 100%);

  /* Header surfaces */
  --color-header-bg: rgba(250, 250, 252, 0.86);
  --color-header-surface: rgba(255, 255, 255, 0.94);
  --color-header-surface-strong: #FFFFFF;
  --color-header-border: rgba(17, 21, 33, 0.10);
  --color-header-hover: rgba(17, 21, 33, 0.055);

  /* Compatibility aliases used by existing landing components. */
  --sans: var(--font-sans);
  --bg: var(--color-canvas);
  --bg-soft: var(--color-surface);
  --bg-softer: var(--color-surface);
  --surface: var(--color-surface);
  --ink: var(--color-text-primary);
  --ink-2: var(--color-text-secondary);
  --muted: var(--color-text-muted);
  --faint: var(--color-text-subtle);
  --line: var(--color-border-subtle);
  --line-2: var(--color-border-default);
  --focus-ring: var(--color-focus);
  --accent-a: #6E8C52;
  --accent-b: #3E6EA5;
  --aur-1: var(--brand-mint);
  --aur-2: var(--brand-cyan);
  --aur-3: var(--brand-indigo);
  --aur-4: #8B5CF6;
  --aur-deep: var(--brand-teal);
  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);
  --shadow-lg: var(--elevation-3);
  --r-sm: var(--radius-3);
  --r-md: var(--radius-4);
  --r-lg: var(--radius-5);
  --r-xl: var(--radius-5);
  --control-radius: var(--radius-pill);
  --ease: var(--ease-enter);
  --header-bg: var(--color-header-bg);
  --header-surface: var(--color-header-surface);
  --header-surface-strong: var(--color-header-surface-strong);
  --header-text: var(--color-text-primary);
  --header-muted: var(--color-text-muted);
  --header-border: var(--color-header-border);
  --header-hover: var(--color-header-hover);
  --header-shadow: var(--elevation-2);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #0A0D14;
  --color-canvas-subtle: #0F131C;
  --color-surface: #121722;
  --color-surface-raised: #161B27;
  --color-text-primary: #F5F7FC;
  --color-text-secondary: #D5DAE4;
  --color-text-muted: #AEB6C5;
  --color-text-subtle: #9DA6B7;
  --color-text-inverse: #0B0B0C;
  --color-border-subtle: #242C3A;
  --color-border-default: #343E50;
  --color-border-strong: #66738A;
  --color-focus: #82A7FF;
  --color-selection: #11192A;
  --color-success: #67DDB3;
  --color-success-surface: #13221D;
  --color-warning: #FFCA6B;
  --color-warning-surface: #251C0B;
  --color-error: #FF8A80;
  --color-error-surface: #2A1515;
  --color-info: #82A7FF;
  --color-info-surface: #11192A;
  --color-interactive-hover: #1D2431;
  --color-interactive-active: #242C3A;
  --elevation-1: 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.22);
  --elevation-2: 0 4px 12px rgba(0,0,0,0.30), 0 16px 40px rgba(0,0,0,0.28);
  --elevation-3: 0 12px 28px rgba(0,0,0,0.38), 0 28px 72px rgba(0,0,0,0.34);
  --elevation-4: 0 24px 64px rgba(0,0,0,0.48), 0 40px 120px rgba(0,0,0,0.42);
  --color-header-bg: rgba(10, 13, 20, 0.84);
  --color-header-surface: rgba(20, 25, 36, 0.94);
  --color-header-surface-strong: #161B27;
  --color-header-border: rgba(218, 225, 240, 0.13);
  --color-header-hover: rgba(235, 240, 255, 0.075);
  --action-primary-bg: #F5F7FC;
  --action-primary-bg-hover: #FFFFFF;
  --action-primary-bg-active: #DDE3EE;
  --action-primary-text: #0B0B0C;
  --action-primary-border: #F5F7FC;
  --action-secondary-bg: #161B27;
  --action-secondary-bg-hover: #1D2431;
  --action-secondary-bg-active: #10151E;
  --action-secondary-text: #F5F7FC;
  --action-secondary-border: #343E50;
  --action-outline-bg-hover: #161B27;
  --action-outline-bg-active: #121722;
  --action-outline-text: #F5F7FC;
  --action-outline-border: #343E50;
  --action-ghost-bg-hover: #161B27;
  --action-ghost-bg-active: #242C3A;
  --action-danger-bg: #351A1B;
  --action-danger-bg-hover: #482021;
  --action-danger-bg-active: #291416;
  --action-danger-text: #FFB4AE;
  --action-danger-border: #713536;
  --action-standard-hover-border: rgba(139, 92, 246, 0.62);
  --action-standard-hover-ring: rgba(139, 92, 246, 0.20);
  --action-disabled-bg: #1A202B;
  --action-disabled-text: #929BAD;
  --action-disabled-border: #343E50;
  --bg-softer: #0F141E;
}

@media (min-width: 600px) {
  :root {
    --page-gutter: clamp(1.5rem, calc(1rem + 1.3333vw), 1.75rem);
    --content-inline-space: 3rem;
  }
}

@media (min-width: 901px) {
  :root {
    --type-caption: 12px;
    --target-web: 35px;
    --control-padding-block: 10px;
    --control-padding-inline: 20px;
    --control-large-padding-block: 14px;
    --control-large-padding-inline: 26px;
    --action-height-compact: 35px;
    --action-height-standard: 38px;
    --action-height-large: 45px;
    --menu-row-height: 44px;
    --type-menu-description: 10px;
    --brand-lockup-header-icon-height: 22px;
    --brand-lockup-header-wordmark-height: 14px;
    --brand-lockup-auth-icon-height: 48px;
    --brand-lockup-auth-wordmark-height: 22px;
    --brand-lockup-footer-icon-height: 26px;
    --brand-lockup-footer-wordmark-height: 16px;
    --brand-lockup-loader-icon-height: clamp(22px, 3.92vw, 35px);
    --brand-lockup-loader-wordmark-height: clamp(14px, 2.52vw, 22px);
    --brand-lockup-gap: 6px;
    --brand-lockup-footer-gap: 8px;
    --brand-lockup-loader-gap: clamp(8px, 1.28vw, 10px);
  }
}

/* Desktop uses the canonical 1x token values. This is the approved compact
   density that previously appeared only when the enlarged UI was viewed at
   80% browser zoom. Browser zoom and CSS zoom are never used as layout tools. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-standard: 1ms;
    --duration-emphasized: 1ms;
    --duration-slow: 1ms;
  }
}