/* syla-frontend — single stylesheet for landing and legal pages.
 *
 * Built on the SYLA design system (../syla-design-system/colors_and_type.css).
 * The tokens, fonts and type roles below mirror that file 1:1; if the system
 * changes, update this file and rerun `npm run build`.
 *
 * Mobile-first: the default rules target a ~360px phone (small container
 * padding, compact hero, stacked metadata, ≥44px touch targets). Larger
 * viewports opt in via `min-width` media queries:
 *
 *   ≥ 640px  small tablet / large phone landscape  → looser padding, bigger lede
 *   ≥ 960px  small laptop                          → wider container, tablet hero
 *   ≥ 1120px desktop                               → max content shell
 *
 * Surfaces are dark by default (canvas #0A0A0A, warm neutral, no blue cast).
 * Brand orange #F2691F is the only accent. Light theme follows the system's
 * warm-paper palette and triggers automatically when the visitor's OS is in
 * light mode (no toggle UI on this site yet).
 */

/* ─── Brand fonts ────────────────────────────────────────── */

@font-face {
  font-family: "SF Pro Display";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/SFPRODISPLAYREGULAR.OTF") format("opentype");
}
@font-face {
  font-family: "SF Pro Display";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype");
}
@font-face {
  font-family: "SF Pro Display";
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/SFPRODISPLAYBOLD.OTF") format("opentype");
}
@font-face {
  font-family: "SF Pro Display";
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url("/fonts/SFPRODISPLAYHEAVYITALIC.OTF") format("opentype");
}
@font-face {
  font-family: "SF Pro Display";
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  src: url("/fonts/SFPRODISPLAYBLACKITALIC.OTF") format("opentype");
}
@font-face {
  font-family: "Roboto Flex";
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/RobotoFlex-VariableFont_GRAD_XOPQ_XTRA_YOPQ_YTAS_YTDE_YTFI_YTLC_YTUC_opsz_slnt_wdth_wght.ttf")
    format("truetype-variations");
}

/* ─── Tokens — dark (default) ────────────────────────────── */

:root,
:root[data-theme="dark"] {
  --background: #0a0a0a;
  --surface: #161616;
  --surface-container-low: #111111;
  --surface-container: #1f1f1f;
  --surface-container-high: #262626;

  --on-background: #f5f5f5;
  --on-surface: #f5f5f5;
  --on-surface-variant: #a8a8a8;
  --outline: #3a3a3a;
  --outline-variant: #262626;

  --primary: #f2691f;
  --on-primary: #1a0e08;
  --primary-container: #3a1a0a;
  --on-primary-container: #ffd2b5;

  --success: #7fb87b;
  --danger: #e5707a;
  --warning: #e5b252;

  --shadow-card: 0 0.5px 0 0 rgba(255, 255, 255, 0.04) inset;

  --font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Roboto Flex",
    system-ui, "Helvetica Neue", sans-serif;

  /* Spacing scale — 4dp base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Layout — start small, widen via media queries */
  --container-pad: 16px;
  --content-width: 760px;
  --shell-width: 1120px;

  /* Touch */
  --tap-min: 44px;

  /* Motion */
  --dur-quick: 160ms;
  --dur-standard: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ─── Tokens — light (auto via prefers-color-scheme) ─────── */

:root[data-theme="light"] {
  --background: #f7f5f0;
  --surface: #ffffff;
  --surface-container-low: #faf8f3;
  --surface-container: #f1ede5;
  --surface-container-high: #eae5db;

  --on-background: #171717;
  --on-surface: #171717;
  --on-surface-variant: #5c5a56;
  --outline: #d2cdc0;
  --outline-variant: #e8e3d7;

  --primary: #f2691f;
  --on-primary: #ffffff;
  --primary-container: #ffe4d2;
  --on-primary-container: #4a1f08;

  --success: #4d9462;
  --danger: #b83a3f;
  --warning: #b8862b;

  --shadow-card: 0 1px 2px rgba(23, 23, 23, 0.04);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --background: #f7f5f0;
    --surface: #ffffff;
    --surface-container-low: #faf8f3;
    --surface-container: #f1ede5;
    --surface-container-high: #eae5db;

    --on-background: #171717;
    --on-surface: #171717;
    --on-surface-variant: #5c5a56;
    --outline: #d2cdc0;
    --outline-variant: #e8e3d7;

    --on-primary: #ffffff;
    --primary-container: #ffe4d2;
    --on-primary-container: #4a1f08;

    --shadow-card: 0 1px 2px rgba(23, 23, 23, 0.04);
  }
}

/* ─── Reset & base ───────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Sticky-footer scaffolding: body fills the viewport, the footer's
   * `margin-top: auto` pushes it to the bottom on short pages while still
   * sitting after the content on long ones. `100dvh` instead of `100vh`
   * avoids the iOS dynamic-toolbar jump. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  /* Stop subtle horizontal scroll caused by clamped wide media. */
  overflow-x: hidden;
}

::selection {
  background: rgba(242, 105, 31, 0.3);
  color: inherit;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-standard);
  /* Removes 300ms tap delay on iOS without disabling pinch-zoom. */
  touch-action: manipulation;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* ─── Layout primitives ──────────────────────────────────── */

.container {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}
.container--content {
  max-width: var(--content-width);
}

@media (min-width: 640px) {
  :root {
    --container-pad: 24px;
  }
}
@media (min-width: 960px) {
  :root {
    --container-pad: 32px;
  }
}

/* ─── Brand lockup ───────────────────────────────────────── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--on-surface);
  line-height: 1;
  /* Big enough touch target without inflating the visible icon. */
  padding-block: 6px;
}
.brand:hover {
  text-decoration: none;
  color: var(--on-surface);
}

.brand__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--primary);
  border-radius: 7px;
  color: #0b0b0b;
  font-weight: 900;
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.02em;
  padding-right: 1px;
  padding-bottom: 1px;
  flex-shrink: 0;
}

.brand__wordmark {
  font-weight: 900;
  font-style: italic;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: currentColor;
}

@media (min-width: 640px) {
  .brand__wordmark {
    font-size: 20px;
  }
}

.brand__dot {
  color: var(--primary);
}

/* ─── Site header ────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-block: 10px;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 0.5px solid var(--outline-variant);
  /* Respect iOS notch / Dynamic Island when used as a sticky bar. */
  padding-top: max(10px, env(safe-area-inset-top));
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-nav {
  display: flex;
  gap: 4px;
}
.site-nav a {
  /* ≥44px tap target (Apple HIG), built from padding + line-height. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: 10px;
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--on-surface);
  text-decoration: none;
}

@media (min-width: 640px) {
  .site-nav {
    gap: var(--space-2);
  }
  .site-nav a {
    padding-inline: 12px;
  }
}

/* ─── Site footer ────────────────────────────────────────── */

.site-footer {
  /* `margin-top: auto` pins the footer to the bottom of the viewport on
   * short pages (the landing) without using `position: fixed`, which would
   * cover content on long ones (legal pages). On long pages the auto-margin
   * resolves to 0 and the footer sits naturally after the content. */
  margin-top: auto;
  padding-block: var(--space-8) var(--space-8);
  /* Respect iOS home-indicator. */
  padding-bottom: max(var(--space-8), calc(var(--space-6) + env(safe-area-inset-bottom)));
  border-top: 0.5px solid var(--outline-variant);
  color: var(--on-surface-variant);
  font-size: 13px;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer p {
  margin: 0;
}
.site-footer a {
  color: var(--on-surface-variant);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--outline);
}
.site-footer a:hover {
  color: var(--on-surface);
  text-decoration-color: currentColor;
}

@media (min-width: 640px) {
  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    align-items: center;
    justify-content: space-between;
  }
}

/* ─── Section heading (UPPER) ────────────────────────────── */

.section-heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin: 0 0 var(--space-3);
}

/* ─── Pill / status badge ────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-container);
  border: 0.5px solid var(--outline-variant);
  font-size: 12px;
  font-weight: 700;
  color: var(--on-surface-variant);
  /* Long status copy stays inside on a 320px viewport. */
  max-width: 100%;
}
.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

/* ─── Landing hero ───────────────────────────────────────── */

.landing main {
  padding-block: var(--space-10) var(--space-10);
}

.hero__lockup {
  display: inline-flex;
  align-items: baseline;
  margin: 0 0 var(--space-5);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.025em;
  /* Mobile-first: 14vw scales smoothly from 320 → 720; capped at 128. */
  font-size: clamp(56px, 14vw, 128px);
  line-height: 0.95;
  color: var(--on-background);
}
.hero__lockup .brand__dot {
  font-size: 0.9em;
}

.hero__lede {
  max-width: 620px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-surface);
  margin: 0 0 var(--space-5);
}

.hero__status {
  margin: 0 0 var(--space-6);
}

.hero__contact {
  font-size: 15px;
  color: var(--on-surface-variant);
  margin: 0 0 var(--space-8);
  max-width: 560px;
}
.hero__contact a {
  color: var(--primary);
  font-weight: 600;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-5);
  border-top: 0.5px solid var(--outline-variant);
}
.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--on-surface);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--outline);
}
.legal-links a:hover,
.legal-links a:focus-visible {
  text-decoration-color: var(--primary);
  color: var(--primary);
}

@media (min-width: 640px) {
  .landing main {
    padding-block: var(--space-12) var(--space-12);
  }
  .hero__lede {
    font-size: 19px;
  }
  .legal-links {
    gap: var(--space-3) var(--space-6);
    padding-top: var(--space-6);
  }
}
@media (min-width: 960px) {
  .landing main {
    padding-block: var(--space-16) var(--space-12);
  }
  .hero__lede {
    font-size: 20px;
  }
}

/* ─── Legal pages ────────────────────────────────────────── */

.legal main {
  padding-block: var(--space-6) var(--space-6);
}

.legal-content {
  max-width: 100%;
  word-wrap: break-word;
  color: var(--on-background);
}

.legal-content h1 {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}
.legal-content h2 {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: var(--space-10) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 0.5px solid var(--outline-variant);
}
.legal-content h3 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: var(--space-6) 0 var(--space-2);
  color: var(--on-surface);
}

.legal-content p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  margin: var(--space-3) 0;
  color: var(--on-surface);
}

.legal-content ul,
.legal-content ol {
  padding-left: 22px;
  margin: var(--space-3) 0;
  color: var(--on-surface);
}
.legal-content li {
  margin: 6px 0;
  line-height: 1.55;
}
.legal-content li::marker {
  color: var(--on-surface-variant);
}

.legal-content blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--primary);
  background: var(--surface-container);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--on-surface-variant);
}
.legal-content blockquote p {
  margin: 4px 0;
  color: inherit;
}
.legal-content blockquote strong {
  color: var(--on-surface);
}

.legal-content code {
  background: var(--surface-container);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: "SF Pro Display", var(--font-sans);
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Tables — wrap in horizontal scroll on small screens.
 * The wrapper class isn't always present (markdown produces bare <table>),
 * so we make the table itself scroll-friendly via `display: block` only on
 * narrow viewports, restoring `table` layout once we have width to spare. */
.legal-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-size: 13px;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  border: 0.5px solid var(--outline-variant);
}
.legal-content th,
.legal-content td {
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--outline-variant);
  text-align: left;
  vertical-align: top;
  white-space: normal;
}
.legal-content tr:last-child td {
  border-bottom: 0;
}
.legal-content th {
  background: var(--surface-container);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--on-surface);
}

.legal-content hr {
  border: 0;
  border-top: 0.5px solid var(--outline-variant);
  margin: var(--space-10) 0;
}

.legal-content strong {
  color: var(--on-surface);
  font-weight: 700;
}

.legal-content a {
  color: var(--primary);
  font-weight: 600;
  /* Long URLs/emails don't push the layout wide on phones. */
  word-break: break-word;
}

@media (min-width: 640px) {
  .legal main {
    padding-block: var(--space-10) var(--space-8);
  }
  .legal-content h1 {
    font-size: 32px;
  }
  .legal-content h2 {
    font-size: 22px;
    margin-top: var(--space-12);
  }
  .legal-content h3 {
    font-size: 17px;
    margin-top: var(--space-8);
  }
  .legal-content table {
    display: table;
    overflow-x: visible;
    font-size: 14px;
  }
  .legal-content th,
  .legal-content td {
    padding: 10px 14px;
  }
}
@media (min-width: 960px) {
  .legal-content h1 {
    font-size: 36px;
  }
}

/* ─── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}