/* Belagon tokens + base. The only source of colour, type and shape language on the client.
   Pages add layout on top (css/app.css, css/landing.css, legal/legal.css). Theme notes: docs/design-theme.md. */
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dmsans-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* Porcelain page, white cards, plum-black ink, the logo's rose → coral → peach (docs/design-theme.md).
     The logo colours themselves fail AA as text or under white text, so text and buttons use deeper cuts of the same
     hues (contrast measured: white on --cta 4.8–5.1:1, --accent-ink 5.7:1 on paper, --text-accent ≥3.3:1 for ≥24 px). */
  --paper: #FFFAF8;
  --paper-2: #FDEFEE;
  --surface: #FFFFFF;
  --ink: #2A0F1F;
  --ink-2: #5C4A54;
  --ink-3: #7A6872;
  --line: #F1E3E3;
  --line-2: #DDCBCE;
  --plum: #2A0F1F;
  --rose: #FF3D7F;
  --coral: #FF6A55;
  --peach-hot: #FFA35E;
  --accent: #E8296A;
  --accent-press: #D41F5C;
  --accent-dim: #F6B5C8;
  --accent-soft: #FFEDF1;
  --accent-ink: #C2185B;
  --blush: #FFA98F;
  --peach: #FFD7C2;
  --brand-grad: linear-gradient(90deg, #FF3D7F 0%, #FF6A55 55%, #FFA35E 100%);
  --cta: linear-gradient(110deg, #D41F5C 0%, #D03A35 100%);
  --cta-hover: linear-gradient(110deg, #BF1A52 0%, #BB3230 100%);
  --text-accent: linear-gradient(100deg, #E8296A 0%, #F2553F 100%);
  --glow: radial-gradient(75% 100% at 50% 100%, rgba(255, 150, 112, .45), rgba(255, 150, 112, 0) 74%);
  --ok: #2F6B52;
  --ok-soft: #E5F0EA;
  --warn: #B42318;
  --warn-soft: #FCEBE8;
  --star: #C08A2E;
  --shadow-1: 0 1px 2px rgba(42, 15, 31, .05), 0 1px 3px rgba(42, 15, 31, .06);
  --shadow-2: 0 12px 32px rgba(42, 15, 31, .10), 0 2px 6px rgba(42, 15, 31, .05);
  --shadow-cta: 0 8px 20px rgba(212, 31, 92, .26);
  --radius-s: 8px;
  --radius: 10px;
  --radius-l: 16px;
  --gutter: 16px;
  --col: 440px;
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-optical-sizing: auto;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* One highlighted word or phrase per headline. */
.hl { background: var(--text-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Primary action: a rose → coral block with small corners. */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; position: relative;
  width: 100%; min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--radius-s); cursor: pointer;
  background: var(--cta); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: 0; text-decoration: none;
  box-shadow: var(--shadow-cta); transition: background .15s, transform .1s, box-shadow .15s;
}
/* Hover colours only where a pointer hovers: on touch they stick after a tap. Order kept so the cascade is unchanged. */
@media (hover: hover) { .btn:hover { background: var(--cta-hover); } }
.btn:active { transform: scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--accent-dim); box-shadow: none; cursor: default; transform: none; }
.btn--ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
@media (hover: hover) { .btn--ghost:hover { background: var(--paper-2); } }
.btn--dark { background: var(--plum); box-shadow: none; }
@media (hover: hover) { .btn--dark:hover { background: var(--ink); } }
.btn.is-busy { pointer-events: none; }
.btn.is-busy::after {
  content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.link {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent-ink);
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* Logo (brand.js fills it): the Sora wordmark with the aperture o; .logo--compact shows the app icon on phones. */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--plum); line-height: 0; }
.logo .logo-word { height: 24px; width: auto; aspect-ratio: 4015 / 965; flex: none; }
.logo .logo-mark { display: none; width: 34px; height: 34px; flex: none; }
@media (max-width: 599px) {
  .logo--compact .logo-word { display: none; }
  .logo--compact .logo-mark { display: block; }
}

/* German consent banner (js/ui.js COOKIE_DE): the same rules as .cookie in app.css, here because the German legal pages
   and /de/support/ load brand.css + legal.css only. Scoped to .cookie--de so English pages are untouched. */
.cookie.cookie--de {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-2);
  font-size: 14px; color: var(--ink-2);
}
.cookie.cookie--de p { margin: 0; flex: 1 1 220px; }
.cookie.cookie--de div { display: flex; gap: 8px; }
.cookie.cookie--de .btn { min-height: 40px; width: auto; padding: 0 16px; font-size: 14.5px; }