/* Shared foundations. Every page, including exported components, uses these tokens. */
@import url('/fonts.css');

:root {
  --font-display: 'Instrument Sans', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --text-caption: .75rem;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-lead: clamp(1.125rem, 1rem + .4vw, 1.25rem);
  --text-heading-sm: 1.5rem;
  --text-card: clamp(1.5rem, 1.25rem + .8vw, 2rem);
  --text-section: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-title: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  --text-display: clamp(3rem, 1.5rem + 5vw, 6rem);
  --text-hero: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  /* The animated home word sequence has a fixed em-based stage. */
  --text-word-sequence: clamp(1.375rem, 6.2vw, 6rem);
  /* Product illustrations scale with their physical container. */
  --text-device: 2.4cqw;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-body: 1.6;
  --leading-ui: 1.45;
  --leading-label: 1.5;
  --leading-heading: 1.12;
  --leading-display: 1.05;
  --tracking-body: 0;
  --tracking-heading: -.025em;
  --tracking-display: -.04em;
  --tracking-label: .1em;
  --tracking-wordmark: .24em;

  --paper: #fff;
  --surface: #f7f8fa;
  --ink: #0e1216;
  --text-muted-light: #5c6470;
  --text-muted-dark: #a3acb9;
  --accent: #2a97fe;
  --mp-accent: var(--accent);
  --action: #146bd1;
  --action-hover: #1058ad;
  --action-pressed: #0d478e;
  --link-light: #146bd1;
  --link-dark: #69b5ff;
  --link: var(--link-light);
  --muted: var(--text-muted-light);
  --rule: #dce0e5;

  /* Original brand stops: decoration, illustrations, hairlines and swatches. */
  --gradient-warm: linear-gradient(90deg, #f0473b, #fe850e);
  --gradient-cool: linear-gradient(90deg, #3590fd, #a857e1);
  --gradient-fresh: linear-gradient(90deg, #33c961, #09d3e4);
  --warm-ink-start: #c6352d;
  --warm-ink-end: #af5900;
  /* Related ink variants preserve the hue families on pale backgrounds. */
  --gradient-warm-ink: linear-gradient(90deg, var(--warm-ink-start), var(--warm-ink-end));
  --gradient-cool-ink: linear-gradient(90deg, #146bd1, #8741bb);
  --gradient-fresh-ink: linear-gradient(90deg, #197b40, #087b88);
  --wash-warm: linear-gradient(120deg, #fef4f2, #fff7ee 55%, #fff);
  --wash-cool: linear-gradient(120deg, #f0f6ff, #f8f2fc 55%, #fff);
  --wash-fresh: linear-gradient(120deg, #f0faf3, #eefafb 55%, #fff);
  color-scheme: light;
}

[data-theme='dark'] {
  --paper: #08090b;
  --surface: #11151b;
  --ink: #f2f4f6;
  --muted: var(--text-muted-dark);
  --rule: #343b46;
  --link: var(--link-dark);
  --gradient-warm-ink: var(--gradient-warm);
  --gradient-cool-ink: var(--gradient-cool);
  --gradient-fresh-ink: var(--gradient-fresh);
  color-scheme: dark;
}
[data-theme='light'] {
  --paper: #fff;
  --surface: #f7f8fa;
  --ink: #0e1216;
  --muted: var(--text-muted-light);
  --rule: #dce0e5;
  --link: var(--link-light);
  --gradient-warm-ink: linear-gradient(90deg, #c6352d, #af5900);
  --gradient-cool-ink: linear-gradient(90deg, #146bd1, #8741bb);
  --gradient-fresh-ink: linear-gradient(90deg, #197b40, #087b88);
  color-scheme: light;
}
html, body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); font-synthesis: none; font-optical-sizing: auto; }
body { -webkit-font-smoothing: antialiased; }
/* One supplied vector mark for headers, footers, and product navigation. */
[data-brand-link] { display: inline-flex; align-items: center; justify-content: flex-start; width: fit-content; min-width: 44px; min-height: 44px; }
.taco-mark { display: block; flex: none; width: 40px; height: 24.2px; background-color: currentColor; -webkit-mask: url('/assets/brand/taco.svg') center / contain no-repeat; mask: url('/assets/brand/taco.svg') center / contain no-repeat; }
.taco-navigation .taco-mark { width: 44px; height: 26.62px; }
[data-subnav] [data-brand-link] { min-height: 32px; }
[data-subnav] .taco-mark { width: 32px; height: 19.36px; }
[data-screen-label='Footer'] .taco-mark { width: 48px; height: 29.04px; }
button, input, select, textarea { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6, [data-type='display'] { font-family: var(--font-display); text-wrap: balance; }
code, kbd, pre, samp, [data-type='label'] { font-family: var(--font-mono); }
[data-type='label'] { font-weight: var(--weight-medium); font-size: var(--text-caption); line-height: var(--leading-label); letter-spacing: var(--tracking-label); }
[data-type='wordmark'] { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wordmark); }
[data-control='primary'], [data-control='secondary'], [data-control='segment'] {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  transition: background-color .18s, border-color .18s, color .18s;
}
[data-control='primary'] { background: var(--action); color: #fff; }
[data-control='primary']:not(:disabled):not([aria-disabled='true']):hover,
a:hover > [data-control='primary'] { background: var(--action-hover) !important; filter: none !important; color: #fff !important; }
[data-control='primary']:not(:disabled):not([aria-disabled='true']):active,
a:active > [data-control='primary'] { background: var(--action-pressed) !important; }
[data-control='secondary'] { color: var(--link); border: 1px solid color-mix(in srgb, var(--link) 40%, transparent); background: transparent; }
[data-control='secondary']:hover, a:hover > [data-control='secondary'] { color: var(--link) !important; border-color: var(--link) !important; background: color-mix(in srgb, var(--link) 7%, transparent) !important; }
[data-control='segment']:hover { border-color: var(--link) !important; }
[data-control='segment'][aria-pressed='true']:hover { background: var(--action-hover) !important; color: #fff !important; }
[data-control='primary'][aria-disabled='true'], [data-control='primary']:disabled { background: var(--rule) !important; color: var(--muted) !important; cursor: not-allowed; filter: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
::selection { background: #c8e4ff; color: #0e1216; }

/* Contextual actions sit in normal flow after a feature sequence. */
.context-cta {
  box-sizing: border-box;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 32px 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.context-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  max-width: 100%;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: var(--text-body);
  line-height: var(--leading-ui);
  text-decoration: none;
}
.context-cta__note { margin: 0; color: var(--muted); font-size: var(--text-small); line-height: var(--leading-ui); }
@media (max-width: 600px) {
  .context-cta { padding-inline: 20px; }
}

/* Decorative treatments stay separate from solid, readable controls. */
[data-surface='warm'] { background: var(--wash-warm) !important; box-shadow: none !important; }
[data-surface='cool'] { background: var(--wash-cool) !important; }
[data-accent-rule]::before { content: ''; display: block; width: 64px; height: 3px; margin-bottom: 24px; border-radius: 2px; background: var(--section-gradient); }
[data-accent-rule='warm'] { --section-gradient: var(--gradient-warm); }
[data-accent-rule='cool'] { --section-gradient: var(--gradient-cool); }
[data-accent-rule='fresh'] { --section-gradient: var(--gradient-fresh); }
[data-gradient-text] { background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; }
[data-gradient-text='warm'] { background: var(--gradient-warm-ink); }
[data-gradient-text='cool'] { background: var(--gradient-cool-ink); }
[data-gradient-text='fresh'] { background: var(--gradient-fresh-ink); }
[data-surface='cool'][data-featured-plan] { box-shadow: 0 18px 48px -32px rgba(14,18,22,.2) !important; border-color: color-mix(in srgb, var(--link) 35%, transparent) !important; }

/* Exported navigation and footer must accommodate the shared type scale. */
[data-screen-label='Footer'] > div:first-child { grid-template-columns: minmax(200px, 1.4fr) repeat(4, minmax(0, 1fr)) !important; }
[data-screen-label='Footer'] a { overflow-wrap: anywhere; }
@media (max-width: 800px) {
  [data-screen-label='Footer'] > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-screen-label='Footer'] > div:first-child > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  [data-screen-label='Nav'], [data-screen-label='Page nav'] { padding: 14px 20px !important; gap: 12px !important; flex-wrap: wrap !important; }
  [data-screen-label='Nav'] > div { order: 3; width: 100%; justify-content: center; gap: 22px !important; }
  [data-screen-label='Page nav'] > div:nth-child(2) { width: 100%; margin-left: 0 !important; justify-content: space-between; gap: 12px !important; flex-wrap: wrap; }
  [data-screen-label='Page nav'] > div:nth-child(2) > div { gap: 16px !important; flex-wrap: wrap; }
  [data-screen-label='Footer'] > div:first-child { padding-inline: 20px !important; gap: 32px 20px !important; }
  /* Fixed minimum card widths in the export otherwise overflow small phones. */
  [style*='grid-template-columns:repeat(auto-fit,minmax('] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* The live style guide deliberately uses the same foundations as the pages. */
.ds { max-width: 1240px; margin: 0 auto; padding: 32px 48px 80px; color: var(--ink); }
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds p, .ds h1, .ds h2, .ds h3 { margin: 0; }
.ds-nav { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--rule); font-size: var(--text-small); }
.ds-nav a { color: var(--link); }
.ds-hero { padding: 80px 0 64px; max-width: 880px; }
.ds-label { font: var(--weight-medium) var(--text-caption)/var(--leading-label) var(--font-mono); letter-spacing: var(--tracking-label); color: var(--muted); }
.ds-hero h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-bold); margin: 24px 0; }
.ds-hero p { font-size: var(--text-lead); color: var(--muted); max-width: 620px; }
.ds-section { padding: 48px 0; border-top: 1px solid var(--rule); }
.ds-section > h2 { font-size: var(--text-section); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); margin: 12px 0 20px; }
.ds-section > p { color: var(--muted); max-width: 720px; margin-bottom: 28px; }
.ds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ds-card { border: 1px solid var(--rule); border-radius: 20px; padding: 28px; background: #fff; min-width: 0; }
.ds-card h3 { font-size: var(--text-heading-sm); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); margin: 18px 0 12px; }
.ds-card p { color: var(--muted); font-size: var(--text-small); }
.ds-glyph { display: block; font-size: var(--text-title); line-height: var(--leading-heading); margin: 24px 0; }
.ds-mono { font-family: var(--font-mono); }
.ds-body { font-family: var(--font-body); }
.ds-display { font-family: var(--font-display); }
.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); text-align: left; }
.ds-table th, .ds-table td { border-bottom: 1px solid var(--rule); padding: 18px 16px 18px 0; vertical-align: top; }
.ds-table th { color: var(--muted); font-weight: var(--weight-medium); }
.ds-swatch { height: 112px; border-radius: 12px; border: 1px solid rgba(14,18,22,.06); }
.ds-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ds-palette p { margin-top: 12px; font-size: var(--text-small); }
.ds-palette code { display: block; color: var(--muted); font-size: var(--text-caption); }
.ds-example { margin-top: 24px; padding: 36px; border: 1px solid var(--rule); border-radius: 20px; background: var(--paper); color: var(--ink); }
.ds-example h3 { font-size: var(--text-card); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); margin: 16px 0; }
.ds-example p { color: var(--muted); max-width: 600px; }
.ds-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 24px; }
.ds-state-button { display: inline-flex; align-items: center; min-height: 48px; border-radius: 999px; padding: 10px 22px; border: 1px solid transparent; font-size: var(--text-small); text-decoration: none; }
.ds-state-button[data-control='secondary'] { border-color: color-mix(in srgb, var(--link) 40%, transparent); }
.ds-button { display: inline-flex; align-items: center; min-height: 48px; border-radius: 999px; padding: 10px 22px; background: var(--action); color: #fff; font-size: var(--text-small); font-weight: var(--weight-semibold); }
.ds-button:hover { background: var(--action-hover); color: #fff; }
.ds-text-link { color: var(--link); font-size: var(--text-small); }
.ds-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.ds-rules h3 { font-size: var(--text-heading-sm); margin-bottom: 12px; }
.ds-rules p { color: var(--muted); }
@media (max-width: 760px) {
  .ds { padding: 24px 20px 60px; }
  .ds-hero { padding: 56px 0 48px; }
  .ds-grid, .ds-rules { grid-template-columns: minmax(0, 1fr); }
  .ds-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-example { padding: 24px; }
}