/*
 * Doostami marketing site stylesheet.
 *
 * CSS custom properties are emitted from @doostami/ui-tokens via the build
 * script in apps/marketing/scripts/build.mjs. Do NOT edit the :root token
 * values by hand — change packages/ui-tokens/src/index.ts and rebuild.
 *
 * The hand-written part below the token block defines layout, hierarchy, and
 * component styles using the tokens. That part is fair game to edit.
 */

/* ─── token block (generated by build.mjs; see header above) ─────────────── */
/* GENERATED-TOKENS:BEGIN */
:root {
  /* color — light (default) */
    --color-bg-canvas: #F7F3ED;
    --color-bg-surface: #FFFFFF;
    --color-bg-elevated: #FBF8F2;
    --color-bg-overlay: rgba(28, 26, 21, 0.5);
    --color-text-primary: #1C1A15;
    --color-text-secondary: #5A554B;
    --color-text-tertiary: #8A8479;
    --color-text-inverse: #FBF8F2;
    --color-border-subtle: #E5DFD3;
    --color-border-strong: #C9C2B4;
    --color-border-focus: #B85C39;
    --color-accent-default: #B85C39;
    --color-accent-hover: #A24F30;
    --color-accent-active: #8E4128;
    --color-accent-subtle: #F4E6DD;
    --color-accent-onAccent: #FBF8F2;
    --color-state-positive-default: #6F8367;
    --color-state-positive-subtle: #EAEEE5;
    --color-state-caution-default: #A87331;
    --color-state-caution-subtle: #F5EEDF;
    --color-state-danger-default: #8C2D2D;
    --color-state-danger-subtle: #F4DDDD;
    --color-state-info-default: #3F5566;
    --color-state-info-subtle: #E3E9ED;

  /* type, space, radius, shadow, motion */
    --type-family-display: "Fraunces", "Iowan Old Style", "Charter", "Georgia", serif;
    --type-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --type-family-bodyFarsi: "Vazirmatn", "Iranian Sans", system-ui, sans-serif;
    --type-family-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;
    --type-weight-regular: 400;
    --type-weight-medium: 500;
    --type-weight-semibold: 600;
    --type-size-xs: 12px;
    --type-size-sm: 14px;
    --type-size-base: 16px;
    --type-size-md: 18px;
    --type-size-lg: 22px;
    --type-size-xl: 28px;
    --type-size-2xl: 36px;
    --type-size-3xl: 48px;
    --type-size-display: 64px;
    --type-lineHeight-tight: 1.15;
    --type-lineHeight-snug: 1.3;
    --type-lineHeight-base: 1.6;
    --type-lineHeight-relaxed: 1.75;
    --type-letterSpacing-display: -0.025em;
    --type-letterSpacing-heading: -0.015em;
    --type-letterSpacing-body: 0;
    --type-letterSpacing-caps: 0.05em;
    --type-feature-tabular: "tnum" 1;
    --type-feature-proportional: "pnum" 1;
    --space-0: 0;
    --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-24: 96px;
    --space-0-5: 2px;
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-pill: 9999px;
    --shadow-none: none;
    --shadow-sm: 0 1px 2px 0 rgba(28, 26, 21, 0.04);
    --shadow-md: 0 2px 8px 0 rgba(28, 26, 21, 0.06);
    --shadow-lg: 0 8px 24px 0 rgba(28, 26, 21, 0.08);
    --shadow-xl: 0 16px 48px 0 rgba(28, 26, 21, 0.10);
    --motion-duration-fast: 150ms;
    --motion-duration-base: 220ms;
    --motion-duration-slow: 380ms;
    --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-canvas: #1C1A18;
    --color-bg-surface: #262320;
    --color-bg-elevated: #2F2B27;
    --color-bg-overlay: rgba(0, 0, 0, 0.7);
    --color-text-primary: #F0EBE0;
    --color-text-secondary: #B5AFA2;
    --color-text-tertiary: #7E7869;
    --color-text-inverse: #1C1A15;
    --color-border-subtle: #3A3530;
    --color-border-strong: #4F4940;
    --color-border-focus: #D67857;
    --color-accent-default: #D67857;
    --color-accent-hover: #C0664A;
    --color-accent-active: #A8553E;
    --color-accent-subtle: #3A2920;
    --color-accent-onAccent: #1C1A15;
    --color-state-positive-default: #92A586;
    --color-state-positive-subtle: #2A352A;
    --color-state-caution-default: #D49960;
    --color-state-caution-subtle: #3A2F1F;
    --color-state-danger-default: #C9665B;
    --color-state-danger-subtle: #3A2222;
    --color-state-info-default: #7A92A6;
    --color-state-info-subtle: #243038;
  }
}
/* GENERATED-TOKENS:END */

/* ─── reset ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--type-family-body);
  font-size: var(--type-size-base);
  line-height: var(--type-lineHeight-base);
  letter-spacing: var(--type-letterSpacing-body);
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-accent-subtle);
  color: var(--color-text-primary);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent-default);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-easing-out);
}
a:hover {
  color: var(--color-accent-hover);
}
a:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── layout ─────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 64rem; /* ~1024px */
  margin: 0 auto;
  padding-inline: var(--space-6);
}
.container--narrow {
  max-width: 40rem; /* ~640px — comfortable measure for body prose */
}

.section {
  padding-block: var(--space-16);
}

.section__heading {
  font-family: var(--type-family-display);
  font-size: var(--type-size-2xl);
  line-height: var(--type-lineHeight-snug);
  letter-spacing: var(--type-letterSpacing-heading);
  font-weight: 500;
  margin: 0 0 var(--space-8);
  color: var(--color-text-primary);
}
.section__heading--small {
  font-size: var(--type-size-xl);
  margin-bottom: var(--space-4);
}

/* ─── site header ────────────────────────────────────────────────────────── */
.site-header {
  padding-block: var(--space-6);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-family: var(--type-family-display);
  font-size: var(--type-size-lg);
  font-weight: 500;
}
.brand:hover {
  color: var(--color-text-primary);
}
.brand__mark {
  color: var(--color-accent-default);
  font-size: var(--type-size-2xl);
  line-height: 0.5;
  font-weight: 600;
}

/* ─── hero ───────────────────────────────────────────────────────────────── */
.hero {
  padding-block: var(--space-12) var(--space-16);
}
.hero__inner {
  max-width: 48rem;
}
.hero__title {
  font-family: var(--type-family-display);
  font-size: var(--type-size-3xl);
  line-height: var(--type-lineHeight-tight);
  letter-spacing: var(--type-letterSpacing-display);
  font-weight: 500;
  margin: 0 0 var(--space-6);
}
.hero__lede {
  font-size: var(--type-size-md);
  line-height: var(--type-lineHeight-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-12);
  max-width: 32em;
}

/* ─── waitlist form ──────────────────────────────────────────────────────── */
.waitlist {
  max-width: 32rem;
}
.waitlist__label {
  display: block;
  font-size: var(--type-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.waitlist__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.waitlist__input {
  flex: 1 1 18rem;
  min-height: 48px; /* touch-target friendly even though this is web */
  padding: 0 var(--space-4);
  font-family: var(--type-family-body);
  font-size: var(--type-size-base);
  line-height: var(--type-lineHeight-base);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-out),
    box-shadow var(--motion-duration-fast) var(--motion-easing-out);
}
.waitlist__input::placeholder {
  color: var(--color-text-tertiary);
}
.waitlist__input:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.waitlist__input[aria-invalid='true'] {
  border-color: var(--color-state-danger-default);
}
.waitlist__hint {
  font-size: var(--type-size-sm);
  color: var(--color-text-tertiary);
  margin: var(--space-2) 0 0;
}

/* ─── buttons ────────────────────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  font-family: var(--type-family-body);
  font-size: var(--type-size-base);
  font-weight: 500;
  line-height: 1;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-out),
    transform var(--motion-duration-fast) var(--motion-easing-out);
}
.button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.button--primary {
  color: var(--color-accent-onAccent);
  background: var(--color-accent-default);
}
.button--primary:hover {
  background: var(--color-accent-hover);
}
.button--primary:active {
  background: var(--color-accent-active);
  transform: translateY(1px);
}

/* ─── cards ──────────────────────────────────────────────────────────────── */
.section--cards {
  background: var(--color-bg-elevated);
}
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.card__title {
  font-family: var(--type-family-display);
  font-size: var(--type-size-lg);
  line-height: var(--type-lineHeight-snug);
  font-weight: 500;
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
}
.card__body {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ─── promise ────────────────────────────────────────────────────────────── */
.promise {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
}
.promise li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  font-size: var(--type-size-md);
}
.promise li:last-child {
  border-bottom: none;
}
.promise strong {
  color: var(--color-accent-default);
  font-weight: 600;
}
.promise__signed {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ─── safety note ────────────────────────────────────────────────────────── */
.section--safety {
  background: var(--color-bg-canvas);
  padding-block: var(--space-12);
}
.safety__body {
  font-size: var(--type-size-md);
  line-height: var(--type-lineHeight-base);
  color: var(--color-text-primary);
  margin: 0;
}
.safety__more {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--type-size-sm);
}

/* ─── footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-border-subtle);
}
.site-footer__line {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-size-sm);
}
.site-footer__line--small {
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
}

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