/*
 * tmsquare design tokens as CSS custom properties (--tm-*).
 * Same values as src/tokens.ts (a test keeps them identical). Guide: docs/design/DESIGN_GUIDE.md.
 *
 * Theme: light by default; dark follows the system unless <html data-theme="light">,
 * and <html data-theme="dark"> forces dark.
 */

/* Foundation + light theme */
:root {
  color-scheme: light;

  /* Foundation: type */
  --tm-font-sans: "Geist Variable", Geist, "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tm-font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tm-font-marketing: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tm-weight-regular: 400;
  --tm-weight-medium: 500;
  --tm-weight-semibold: 600;
  --tm-text-display-size: clamp(2.75rem, 6vw, 4.5rem);
  --tm-text-display-line: 1;
  --tm-text-display-tracking: -0.05em;
  --tm-text-display-weight: 600;
  --tm-text-h1-size: clamp(2.25rem, 4.5vw, 3.5rem);
  --tm-text-h1-line: 1.05;
  --tm-text-h1-tracking: -0.045em;
  --tm-text-h1-weight: 600;
  --tm-text-h2-size: clamp(1.75rem, 3vw, 2.25rem);
  --tm-text-h2-line: 1.15;
  --tm-text-h2-tracking: -0.035em;
  --tm-text-h2-weight: 600;
  --tm-text-h3-size: 1.5rem;
  --tm-text-h3-line: 1.25;
  --tm-text-h3-tracking: -0.03em;
  --tm-text-h3-weight: 600;
  --tm-text-title-lg-size: 1.25rem;
  --tm-text-title-lg-line: 1.4;
  --tm-text-title-lg-tracking: -0.02em;
  --tm-text-title-lg-weight: 600;
  --tm-text-title-size: 1rem;
  --tm-text-title-line: 1.5;
  --tm-text-title-tracking: -0.01em;
  --tm-text-title-weight: 500;
  --tm-text-body-lg-size: 1.125rem;
  --tm-text-body-lg-line: 1.6;
  --tm-text-body-lg-tracking: 0;
  --tm-text-body-lg-weight: 400;
  --tm-text-body-size: 1rem;
  --tm-text-body-line: 1.6;
  --tm-text-body-tracking: 0;
  --tm-text-body-weight: 400;
  --tm-text-body-sm-size: 0.875rem;
  --tm-text-body-sm-line: 1.55;
  --tm-text-body-sm-tracking: 0;
  --tm-text-body-sm-weight: 400;
  --tm-text-label-size: 0.875rem;
  --tm-text-label-line: 1.4;
  --tm-text-label-tracking: 0;
  --tm-text-label-weight: 500;
  --tm-text-caption-size: 0.75rem;
  --tm-text-caption-line: 1.4;
  --tm-text-caption-tracking: 0;
  --tm-text-caption-weight: 400;
  --tm-text-overline-size: 0.75rem;
  --tm-text-overline-line: 1.3;
  --tm-text-overline-tracking: 0.06em;
  --tm-text-overline-weight: 500;
  --tm-text-stat-size: clamp(2.5rem, 5vw, 4rem);
  --tm-text-stat-line: 1;
  --tm-text-stat-tracking: -0.05em;
  --tm-text-stat-weight: 500;
  --tm-text-headline-size: clamp(2.25rem, 4.4vw, 4rem);
  --tm-text-headline-line: 1.05;
  --tm-text-headline-tracking: -0.032em;
  --tm-text-headline-weight: 500;
  --tm-text-section-lg-size: clamp(2.5rem, 5vw, 4rem);
  --tm-text-section-lg-line: 1.02;
  --tm-text-section-lg-tracking: -0.04em;
  --tm-text-section-lg-weight: 500;
  --tm-text-section-size: clamp(2rem, 3.6vw, 3rem);
  --tm-text-section-line: 1.06;
  --tm-text-section-tracking: -0.03em;
  --tm-text-section-weight: 500;
  --tm-text-statement-size: clamp(1.625rem, 2.9vw, 2.5rem);
  --tm-text-statement-line: 1.15;
  --tm-text-statement-tracking: -0.025em;
  --tm-text-statement-weight: 500;
  --tm-text-lead-lg-size: 1.375rem;
  --tm-text-lead-lg-line: 1.35;
  --tm-text-lead-lg-tracking: -0.01em;
  --tm-text-lead-lg-weight: 400;
  --tm-text-lead-size: 1.0625rem;
  --tm-text-lead-line: 1.6;
  --tm-text-lead-tracking: 0;
  --tm-text-lead-weight: 400;

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

  /* Foundation: shape */
  --tm-radius-none: 0;
  --tm-radius-xs: 4px;
  --tm-radius-sm: 6px;
  --tm-radius-md: 8px;
  --tm-radius-lg: 12px;
  --tm-radius-xl: 16px;
  --tm-radius-2xl: 24px;
  --tm-radius-pill: 999px;
  --tm-border-thin: 1px;
  --tm-border-thick: 2px;

  /* Foundation: sizes */
  --tm-size-control-sm: 32px;
  --tm-size-control-md: 40px;
  --tm-size-control-lg: 48px;
  --tm-size-input: 40px;
  --tm-size-icon-button: 36px;
  --tm-size-icon-tile: 40px;
  --tm-size-avatar: 32px;
  --tm-size-avatar-lg: 48px;
  --tm-size-header: 64px;
  --tm-size-tab-bar: 64px;
  --tm-size-sidebar: 240px;

  /* Foundation: layout */
  --tm-layout-container-marketing: 1400px;
  --tm-layout-container-app: 1280px;
  --tm-layout-container-narrow: 640px;
  --tm-layout-gutter: 24px;
  --tm-layout-gutter-compact: 16px;
  --tm-layout-section-marketing: 128px;
  --tm-layout-section-app: 32px;

  /* Foundation: motion and layers */
  --tm-motion-duration-fast: 120ms;
  --tm-motion-duration-base: 200ms;
  --tm-motion-duration-slow: 320ms;
  --tm-motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tm-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --tm-z-base: 0;
  --tm-z-sticky: 10;
  --tm-z-dropdown: 30;
  --tm-z-overlay: 40;
  --tm-z-modal: 50;
  --tm-z-toast: 60;

  /* Light theme */
  --tm-bg-page: #FAFAFA;
  --tm-bg-subtle: #F5F5F5;
  --tm-surface: #FFFFFF;
  --tm-surface-raised: #FFFFFF;
  --tm-surface-muted: #F5F5F5;
  --tm-surface-inset: #EBEBEB;
  --tm-surface-inverse: #171717;
  --tm-text-primary: #171717;
  --tm-text-secondary: #4D4D4D;
  --tm-text-muted: #666666;
  --tm-text-disabled: #A1A1A1;
  --tm-text-inverse: #FFFFFF;
  --tm-text-accent: #171717;
  --tm-text-link: #0068D6;
  --tm-border: #EAEAEA;
  --tm-border-strong: #D4D4D4;
  --tm-border-focus: #0068D6;
  --tm-primary: #171717;
  --tm-primary-hover: #383838;
  --tm-primary-active: #000000;
  --tm-on-primary: #FFFFFF;
  --tm-secondary: #FFFFFF;
  --tm-secondary-hover: #F5F5F5;
  --tm-on-secondary: #171717;
  --tm-accent: #171717;
  --tm-accent-strong: #000000;
  --tm-accent-subtle: #EBEBEB;
  --tm-on-accent-subtle: #171717;
  --tm-hero: #0A0A0A;
  --tm-hero-alt: #171717;
  --tm-on-hero: #FFFFFF;
  --tm-on-hero-soft: #A1A1A1;
  --tm-logo-tile: #0A0A0A;
  --tm-logo-mark: #FFFFFF;
  --tm-success: #0E7A3E;
  --tm-success-subtle: #E8F5EC;
  --tm-on-success-subtle: #0B5E30;
  --tm-warning: #C77A00;
  --tm-warning-subtle: #FFF4E0;
  --tm-on-warning-subtle: #7A4A00;
  --tm-danger: #C2302A;
  --tm-danger-subtle: #FDECEA;
  --tm-on-danger-subtle: #9B2520;
  --tm-on-danger: #FFFFFF;
  --tm-info: #0068D6;
  --tm-info-subtle: #EAF3FF;
  --tm-on-info-subtle: #00519E;
  --tm-live: #E5484D;
  --tm-overlay: rgba(0, 0, 0, 0.4);
  --tm-focus-ring: rgba(0, 104, 214, 0.3);
  --tm-grid-dot: #E0E0E0;
  --tm-stage: #0A0A0A;
  --tm-stage-surface: #1A1A1A;
  --tm-stage-border: #2E2E2E;
  --tm-chart-1: #171717;
  --tm-chart-2: #0068D6;
  --tm-chart-3: #12A594;
  --tm-chart-4: #E5484D;
  --tm-chart-5: #A1A1A1;
  --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --tm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --tm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* Dark theme, following the system */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tm-bg-page: #0A0A0A;
    --tm-bg-subtle: #111111;
    --tm-surface: #111111;
    --tm-surface-raised: #1A1A1A;
    --tm-surface-muted: #1A1A1A;
    --tm-surface-inset: #232323;
    --tm-surface-inverse: #EDEDED;
    --tm-text-primary: #EDEDED;
    --tm-text-secondary: #A1A1A1;
    --tm-text-muted: #8F8F8F;
    --tm-text-disabled: #525252;
    --tm-text-inverse: #0A0A0A;
    --tm-text-accent: #EDEDED;
    --tm-text-link: #52A8FF;
    --tm-border: #2E2E2E;
    --tm-border-strong: #454545;
    --tm-border-focus: #52A8FF;
    --tm-primary: #EDEDED;
    --tm-primary-hover: #D4D4D4;
    --tm-primary-active: #A1A1A1;
    --tm-on-primary: #0A0A0A;
    --tm-secondary: #111111;
    --tm-secondary-hover: #1A1A1A;
    --tm-on-secondary: #EDEDED;
    --tm-accent: #EDEDED;
    --tm-accent-strong: #FFFFFF;
    --tm-accent-subtle: #232323;
    --tm-on-accent-subtle: #EDEDED;
    --tm-hero: #171717;
    --tm-hero-alt: #000000;
    --tm-on-hero: #FFFFFF;
    --tm-on-hero-soft: #A1A1A1;
    --tm-logo-tile: #FFFFFF;
    --tm-logo-mark: #0A0A0A;
    --tm-success: #3FB96A;
    --tm-success-subtle: #0F2E1B;
    --tm-on-success-subtle: #7EDC9F;
    --tm-warning: #F5A623;
    --tm-warning-subtle: #33260A;
    --tm-on-warning-subtle: #F7C46C;
    --tm-danger: #FF6166;
    --tm-danger-subtle: #3C1618;
    --tm-on-danger-subtle: #FF9EA1;
    --tm-on-danger: #1A0505;
    --tm-info: #52A8FF;
    --tm-info-subtle: #0D2847;
    --tm-on-info-subtle: #8CC4FF;
    --tm-live: #FF5A5F;
    --tm-overlay: rgba(0, 0, 0, 0.7);
    --tm-focus-ring: rgba(82, 168, 255, 0.4);
    --tm-grid-dot: #262626;
    --tm-stage: #0A0A0A;
    --tm-stage-surface: #1A1A1A;
    --tm-stage-border: #2E2E2E;
    --tm-chart-1: #EDEDED;
    --tm-chart-2: #52A8FF;
    --tm-chart-3: #3DD6C1;
    --tm-chart-4: #FF6166;
    --tm-chart-5: #666666;
    --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --tm-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.55);
    --tm-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);
  }
}

/* Dark theme, forced */
:root[data-theme="dark"] {
  color-scheme: dark;
  --tm-bg-page: #0A0A0A;
  --tm-bg-subtle: #111111;
  --tm-surface: #111111;
  --tm-surface-raised: #1A1A1A;
  --tm-surface-muted: #1A1A1A;
  --tm-surface-inset: #232323;
  --tm-surface-inverse: #EDEDED;
  --tm-text-primary: #EDEDED;
  --tm-text-secondary: #A1A1A1;
  --tm-text-muted: #8F8F8F;
  --tm-text-disabled: #525252;
  --tm-text-inverse: #0A0A0A;
  --tm-text-accent: #EDEDED;
  --tm-text-link: #52A8FF;
  --tm-border: #2E2E2E;
  --tm-border-strong: #454545;
  --tm-border-focus: #52A8FF;
  --tm-primary: #EDEDED;
  --tm-primary-hover: #D4D4D4;
  --tm-primary-active: #A1A1A1;
  --tm-on-primary: #0A0A0A;
  --tm-secondary: #111111;
  --tm-secondary-hover: #1A1A1A;
  --tm-on-secondary: #EDEDED;
  --tm-accent: #EDEDED;
  --tm-accent-strong: #FFFFFF;
  --tm-accent-subtle: #232323;
  --tm-on-accent-subtle: #EDEDED;
  --tm-hero: #171717;
  --tm-hero-alt: #000000;
  --tm-on-hero: #FFFFFF;
  --tm-on-hero-soft: #A1A1A1;
  --tm-logo-tile: #FFFFFF;
  --tm-logo-mark: #0A0A0A;
  --tm-success: #3FB96A;
  --tm-success-subtle: #0F2E1B;
  --tm-on-success-subtle: #7EDC9F;
  --tm-warning: #F5A623;
  --tm-warning-subtle: #33260A;
  --tm-on-warning-subtle: #F7C46C;
  --tm-danger: #FF6166;
  --tm-danger-subtle: #3C1618;
  --tm-on-danger-subtle: #FF9EA1;
  --tm-on-danger: #1A0505;
  --tm-info: #52A8FF;
  --tm-info-subtle: #0D2847;
  --tm-on-info-subtle: #8CC4FF;
  --tm-live: #FF5A5F;
  --tm-overlay: rgba(0, 0, 0, 0.7);
  --tm-focus-ring: rgba(82, 168, 255, 0.4);
  --tm-grid-dot: #262626;
  --tm-stage: #0A0A0A;
  --tm-stage-surface: #1A1A1A;
  --tm-stage-border: #2E2E2E;
  --tm-chart-1: #EDEDED;
  --tm-chart-2: #52A8FF;
  --tm-chart-3: #3DD6C1;
  --tm-chart-4: #FF6166;
  --tm-chart-5: #666666;
  --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --tm-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.55);
  --tm-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tm-motion-duration-fast: 0ms;
    --tm-motion-duration-base: 0ms;
    --tm-motion-duration-slow: 0ms;
  }
}