/* Motiro design tokens. Dark is the default theme; light follows the OS
   preference unless data-theme="dark" is set, and data-theme="light" forces it. */

@import url("/fonts/motiro-fonts.css");

:root,
[data-theme="dark"] {
  --bg: #171819;
  --surface: #202225;
  --surface-raised: #292c31;
  --border: #34373d;
  --text: #f5f6f8;
  --text-muted: #a5aab4;
  --coral: #f58a60;
  --rosa-queimado: #c77c84;
  --azul-acinzentado: #638394;
  --on-accent: #171819;
  --link: #f58a60;
  --success: #41e093;
  --success-bg: #193127;
  --error: #ff5c7a;      /* pending brand approval */
  --error-bg: #3a1a22;   /* pending brand approval */
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-raised: #eef0f3;
    --border: #dadde3;
    --text: #171819;
    --text-muted: #5b606b;
    --link: #171819;
    --success: #1b7a47;
    --success-bg: #e3f7ec;
    --error: #c4213f;
    --error-bg: #fde8ec;
    color-scheme: light;
  }
}

[data-theme="light"] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-raised: #eef0f3;
  --border: #dadde3;
  --text: #171819;
  --text-muted: #5b606b;
  --link: #171819;
  --success: #1b7a47;
  --success-bg: #e3f7ec;
  --error: #c4213f;
  --error-bg: #fde8ec;
  color-scheme: light;
}

:root {
  /* Unchanged across themes */
  --gradient-por-do-sol: linear-gradient(110deg in oklch, #f58a60 0%, #c77c84 50%, #638394 100%);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;
}

/* Links: coral in dark; in light, text color with a coral underline. */
a.link,
.prose a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-underline-offset: 3px;
}

/* Reference button styles (adapt to the project's component system). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font: 700 14px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--azul-acinzentado); outline-offset: 2px; }
.btn-primary { background: var(--coral); color: var(--on-accent); }
.btn-primary:hover { background: var(--rosa-queimado); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--azul-acinzentado); }
.btn-secondary:hover { background: var(--surface-raised); }
.btn-tertiary { background: transparent; color: var(--link); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 4px; }

:root{--shadow:rgb(0 0 0 / .18);--shadow-strong:rgb(0 0 0 / .3);--media-shade:rgb(0 0 0 / .68);--media-text:#f5f6f8;--transparent:transparent;--scene-red:var(--coral);--scene-red-light:var(--link);--scene-line:var(--border);--scene-muted:var(--text-muted);--scene-bg:var(--bg);--scene-card:var(--surface);--motion-ease:cubic-bezier(.4,0,.2,1);--motion-color:420ms;--motion-enter:480ms;--motion-expand:520ms}


:root{--media-highlight:rgb(245 246 248 / .09)}