@import url('/design-tokens.css');
@import url('/fonts/luveyou-fonts.css');

/* Shared identity, loaded after the page-specific styles. */
:root {
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', Arial, sans-serif;
  --radius: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --blue: var(--color-primary);
  --prune: var(--color-primary);
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --cream: var(--color-background);
  --terra: var(--color-accent);
  --paper: var(--color-surface);
  --text: var(--color-text);
  --coral: var(--color-accent);
  --soft: var(--color-soft);
  --white: var(--color-surface);
  --sage: var(--color-soft);
  --shadow: 0 12px 40px color-mix(in srgb, var(--color-primary) 5%, transparent);
  color: var(--color-text);
  background: var(--color-background);
  font: 17px/1.7 var(--font-body);
  font-synthesis: none;
  color-scheme: light;
}

[hidden] { display: none !important; }

body { color: var(--color-text); background: var(--color-background); font-family: var(--font-body); }
button, input, textarea, select { font-family: var(--font-body); }
button { min-height: 44px; }
input:not([type=checkbox]):not([type=radio]), textarea, select { border-color: var(--color-muted); }
h1, h2, h3, .section-title, .summary-heading, .profile-name,
.portrait-family, .statement strong, .duo-score { font-family: var(--font-heading); font-weight: 500; }
h1 { font-size: 64px; line-height: 1.05; }
h2 { font-size: 44px; line-height: 1.15; }
h3 { font-size: 28px; line-height: 1.25; }
small, figcaption { font-size: 13px; line-height: 1.7; }
img, video { max-width: 100%; }
img, video, dialog, input:not([type=checkbox]):not([type=radio]), textarea, select,
button, .button, .primary, .secondary, .card, .panel { border-radius: var(--radius); }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}
::selection { color: var(--color-text); background: var(--color-soft); }

.primary, .secondary, .button, .mc-primary, .mc-space-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 500 15px/1.45 var(--font-body);
  text-decoration: none;
  text-align: center;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
.primary, .button-primary, .mc-primary {
  min-height: 52px;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
}
.primary:hover, .button-primary:hover, .mc-primary:hover {
  background: var(--color-text);
  border-color: var(--color-text);
  transform: none;
}
.secondary, .button-secondary, .mc-space-link {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.secondary:hover, .button-secondary:hover, .mc-space-link:hover { background: var(--color-soft); }
.button-quiet, .quiet { background: transparent; border-color: transparent; color: var(--color-muted); }
.button-quiet:hover, .quiet:hover { color: var(--color-text); }
.button:active, .primary:active, .secondary:active, .mc-primary:active { opacity: .85; }
.button:disabled, .primary:disabled, .secondary:disabled { opacity: .55; }
.ui-icon, button .ui-icon, .inline-icon .ui-icon, .mc-icon .ui-icon,
.bottom-nav .ui-icon, .app-beta-navigation .ui-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* The character and chart geometry are brand content, not interface corners. */
.sample-card, .floating-profile, .floating-note, .art-note, .heart-art { transform: none; }
.luv-thinking .robot-avatar, .message-new, .loader { animation: none; }
.blog-card-visual img { transition: opacity 180ms ease; }
.blog-card-visual:hover img { transform: none; opacity: .92; }
.toast, .toast.visible { transform: translateX(-50%); transition: opacity 180ms ease; }

/* Supporting labels remain readable on every screen. */
.brand .brand-slogan, .brand-slogan, .eyebrow, .section-kicker, .demo-label,
.note, .mini, .save, .tiny-note, .chat-meta, .chat-identity small, .bubble-label,
.conversation-foot, .under-cta, .privacy-note, .edition-bar, .beta-tag,
.sample-top, .sample-story, .sample-tags span, .sample-bottom, .example-stamp,
.message-label, .luv-status div>span, .theme-rail, .theme-position,
.choice-help, .composer-disclosure, .summary-label, .summary-status,
.summary-group>summary small, .profile-stamp, .portrait-card>.eyebrow,
.portrait-facet strong, .portrait-facet p, .portrait-card-note, .pending-role,
.coach-availability, .theme-phase, .theme-optional, .sidebar-bottom small,
.duo-status, .radar-axis-list li, .compatibility-radar figcaption,
.completion-form .field-label, .email-verification .field-label, .privacy-whisper,
.requirement-confirmation-cue, .summary-requirement, .preference-default,
.notification-status, .signed-in-email, .session-notice, .resume-notice { font-size: 13px; line-height: 1.7; }
.choice, .button-chip, .choice-chip { min-height: 44px; }
.button-send, .dialog-close, .icon-button { min-width: 44px; min-height: 44px; }
.workspace-controls .button, .chat-feed .action-group .button, .summary-row .button,
.header-tools .button-quiet, .selection-tools .button { min-height: 44px; font-size: 15px; }
.completion-form input, .email-verification input, .composer-line textarea,
.name-input, .field select, .crm input:not([type=checkbox]), .crm select,
.crm textarea, .comparison-search-row input { border-color: var(--color-muted); }
.message p, .message-user p, .summary-value, .pending-item p,
.card p, .duo-description, .completion-panel>p:not(.eyebrow),
.article-page .content-section p, .article-page .content-section li { font-size: 17px; line-height: 1.7; }
.workspace-sidebar { background: var(--color-primary); color: var(--color-surface); }
.workspace-sidebar .eyebrow, .workspace-sidebar .theme-phase, .workspace-sidebar .current-theme p,
.workspace-sidebar .theme-path li, .workspace-sidebar .theme-optional,
.workspace-sidebar .sidebar-bottom small, .workspace-sidebar .theme-disclosure>summary,
.workspace-sidebar>p, .hero-card .eyebrow, .hero-card p { color: var(--color-soft); }
.workspace-sidebar h2, .workspace-sidebar h3, .workspace-sidebar .sidebar-bottom p,
.workspace-sidebar .theme-path .current { color: var(--color-surface); }
.workspace-sidebar .theme-dot, .workspace-sidebar .current-theme,
.workspace-sidebar .sidebar-bottom { border-color: var(--color-soft); }
.workspace-sidebar .theme-path .current .theme-dot { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-surface); }
.hero-card .button { background: var(--color-surface); border-color: var(--color-surface); color: var(--color-primary); }
.hero-card .button:hover { background: var(--color-soft); border-color: var(--color-soft); }
.result-hero { background: var(--color-primary); color: var(--color-surface); }
.result-hero p, .result-hero .eyebrow { color: var(--color-soft); }
.article-page h1 { font-size: 64px; }
.article-page .content-section h2 { font-size: 44px; }
.article-page .content-section h3 { font-size: 28px; }
.page-heading h1, .private-space>h1, .hero-title { font-family: var(--font-heading); font-weight: 500; }
.app-beta-navigation a>span { font-family: var(--font-body); }

/* Luv and the app do not load the public editorial footer stylesheet. */
body:has(> .site-header .brand-button) > .site-footer,
.app-shell > .app-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
  padding: 24px;
  border-top: 1px solid var(--color-border);
  font: 400 15px/1.7 var(--font-body);
  color: var(--color-muted);
}
body:has(> .site-header .brand-button) > .site-footer {
  width: calc(100% - 32px);
  max-width: 1260px;
}
.app-shell > .app-footer { margin-top: 24px; }
body:has(> .site-header .brand-button) > .site-footer a,
.app-shell > .app-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--color-primary);
  text-decoration: none;
}
body:has(> .site-header .brand-button) > .site-footer a:hover,
.app-shell > .app-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.app-shell > .app-footer > [aria-hidden='true'] { display: none; }
.portrait-axis-number { color: var(--color-accent); font-family: var(--font-body); font-size: 15px; font-weight: 700; }

@media (max-width: 760px) {
  h1, .article-page h1 { font-size: 48px; }
  h2, .article-page .content-section h2 { font-size: 36px; }
  h3, .article-page .content-section h3 { font-size: 28px; }
  .page-heading h1, .private-space>h1, .hero-title { font-size: 48px; }
  .site-header, .app-header, .workspace-heading { min-width: 0; }
  .site-footer nav, .site-header nav { flex-wrap: wrap; }
  .brand .brand-slogan { font-size: 13px; }
  .workspace-controls { gap: 8px; }
  .workspace-controls .button { padding: 8px; }
  .radar-axis-list { grid-template-columns: 1fr; }
  .crm > header {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 24px 16px;
  }
  .crm > header > .brand {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
  }
  .crm > header > .brand .brand-name {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .crm > header > a:not(.brand), .crm > header > button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}