/**
 * AURA design tokens — Tomashevich Mebel
 * Source: teya-memory/design/AURADESIGN.md
 */

:root {
  /* Colors */
  --tm-color-primary: #121416;
  --tm-color-primary-hover: #1a1d21;
  --tm-color-on-primary: #ffffff;
  --tm-color-secondary: #c5a075;
  --tm-color-secondary-hover: #b08e62;
  --tm-color-on-secondary: #121416;
  /* Darker gold for AA text contrast on cream (~4.6:1). Bright on dark via [data-bg-tone="dark"]. */
  --tm-color-accent-gold: #6f5638;
  --tm-color-accent-gold-muted: #5e4a32;
  --tm-color-accent-gold-bright: #c5a075;
  --tm-color-background: #f5f0eb;
  --tm-color-on-background: #121416;
  --tm-color-surface-dark: #121416;
  --tm-color-on-surface-dark: #ffffff;
  --tm-color-surface-cream: #f5f0eb;
  --tm-color-on-surface-cream: #121416;
  --tm-color-surface-lowest: #ffffff;
  --tm-color-surface-low: #ede6df;
  --tm-color-outline: #c5a075;
  --tm-color-outline-variant: #d8cfc4;
  --tm-color-outline-on-dark: rgba(255, 255, 255, 0.35);
  --tm-color-overlay-hero: rgba(18, 20, 22, 0.55);
  --tm-color-error: #b42318;

  /* Typography families — self-hosted Cormorant + Montserrat (Playfair/Caveat dropped for CWV) */
  --tm-font-display: "Cormorant Garamond", "Times New Roman", serif;
  --tm-font-hero-luxury: "Cormorant Garamond", "Times New Roman", serif;
  --tm-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tm-font-signature: "Cormorant Garamond", "Times New Roman", cursive;

  /* Type scale */
  --tm-text-display-hero: clamp(36px, 5.5vw, 64px);
  --tm-text-headline-lg: clamp(28px, 3.5vw, 42px);
  --tm-text-headline-md: clamp(22px, 2.5vw, 32px);
  --tm-text-headline-sm: clamp(18px, 2vw, 24px);
  --tm-text-body-lg: 18px;
  --tm-text-body-md: 16px;
  --tm-text-body-sm: 14px;
  --tm-text-label-nav: 12px;
  --tm-text-stat: clamp(36px, 4vw, 52px);
  --tm-text-button: 12px;

  /* Spacing */
  --tm-space-xs: 8px;
  --tm-space-sm: 16px;
  --tm-space-md: 24px;
  --tm-space-lg: 40px;
  --tm-space-xl: 64px;
  --tm-space-xxl: 96px;
  --tm-section-y-desktop: 96px;
  --tm-section-y-mobile: 56px;
  --tm-gutter: 24px;
  --tm-margin-mobile: 20px;
  --tm-margin-desktop: 48px;
  --tm-container-max: 1280px;

  /* Radii */
  --tm-radius-sm: 4px;
  --tm-radius: 8px;
  --tm-radius-md: 12px;
  --tm-radius-lg: 16px;
  --tm-radius-pill: 9999px;
  --tm-radius-circle: 50%;

  /* Borders & shadows */
  --tm-border-thin: 1px solid;
  --tm-border-gold: 1px solid var(--tm-color-outline);
  --tm-border-white: 1px solid var(--tm-color-outline-on-dark);
  --tm-shadow-card: 0 12px 40px rgba(18, 20, 22, 0.06);

  /* Motion */
  --tm-motion-duration-fast: 200ms;
  --tm-motion-duration-base: 400ms;
  --tm-motion-duration-slow: 700ms;
  --tm-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Fixed header clearance (pill header + top offset) */
  --tm-header-offset-top: 12px;
  --tm-header-bar-height: 76px;
  --tm-header-clearance: calc(var(--tm-header-offset-top) + var(--tm-header-bar-height) + 16px);

  /* Elevation */
  --tm-z-header: 100;
  --tm-z-hero-cta: 20;
  --tm-z-overlay: 10;
  --tm-z-sticky-cta: 90;
  --tm-z-cookie: 100;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .tm-hero__canvas-wrap {
    display: none !important;
  }

  .tm-materials-gallery__canvas-wrap {
    display: none !important;
  }

  .tm-materials-gallery__fallback {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tm-cta-pill,
  .tm-cta-circle {
    transition: border-color var(--tm-motion-duration-fast) var(--tm-motion-ease),
      color var(--tm-motion-duration-fast) var(--tm-motion-ease),
      transform var(--tm-motion-duration-fast) var(--tm-motion-ease);
  }

  .tm-cta-circle:hover {
    transform: scale(1.03);
  }
}

/* Progressive enhancement — keep hero text visible for LCP (text-only homepage). */
.js-motion .tm-hero:not(.tm-hero--text-only) .tm-hero__title,
.js-motion .tm-hero:not(.tm-hero--text-only) .tm-hero__signature,
.js-motion .tm-hero:not(.tm-hero--text-only) .tm-hero__cta {
  opacity: 0;
}

.is-motion-reduced .tm-hero__title,
.is-motion-reduced .tm-hero__signature,
.is-motion-reduced .tm-hero__cta {
  opacity: 1 !important;
}

html {
  scroll-padding-top: var(--tm-header-clearance);
}

@media (max-width: 1023px) {
  :root {
    --tm-header-offset-top: 12px;
    --tm-header-bar-height: 72px;
    --tm-header-clearance: calc(var(--tm-header-offset-top) + var(--tm-header-bar-height) + 12px);
  }
}

/* Bright gold on dark surfaces (borders / accents remain premium). */
[data-bg-tone="dark"],
.tm-header--on-hero[data-header-state="transparent"],
.tm-nav__panel-new {
  --tm-color-accent-gold: var(--tm-color-accent-gold-bright);
  --tm-color-accent-gold-muted: #a88968;
  --tm-color-outline: var(--tm-color-accent-gold-bright);
}