/* Myur Labs — site styles
 * Design tokens ported from the Osprio design system (light + dark),
 * plus the Button / Badge components reproduced as plain CSS. */

:root {
  color-scheme: light;
  --radius: 4px;

  --background: 36 22% 97%;
  --foreground: 28 16% 16%;
  --muted-foreground: 28 10% 42%;
  --border: 32 14% 83%;

  --bg-raised: 60 17% 94%;
  --bg-card: 0 0% 100%;

  --amber: 29 78% 36%;
  --teal: 175 64% 31%;
  --accent: var(--teal);

  /* button / badge */
  --btn-bg: 33 65% 47%;
  --btn-bg-hover: 30 74% 40%;
  --btn-fg: 0 0% 100%;
  --secondary: 35 18% 91%;
  --secondary-foreground: 28 14% 20%;
  --button-outline: 32 14% 79%;
  --badge-outline: 32 14% 79%;
}

.dark {
  color-scheme: dark;

  --background: 182 9% 9%;
  --foreground: 183 8% 88%;
  --muted-foreground: 183 5% 58%;
  --border: 183 10% 20%;

  --bg-raised: 210 13% 12%;
  --bg-card: 216 18% 16%;

  --amber: 35 73% 59%;
  --teal: 174 55% 47%;
  --accent: var(--teal);

  --btn-bg: 36 67% 51%;
  --btn-bg-hover: 36 77% 57%;
  --btn-fg: 0 0% 8%;
  --secondary: 183 10% 17%;
  --secondary-foreground: 183 8% 88%;
  --button-outline: 183 10% 28%;
  --badge-outline: 183 10% 28%;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .2s ease, color .2s ease;
}

img { max-width: 100%; }

/* section anchors clear the sticky nav */
[id] { scroll-margin-top: 84px; }

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

/* ---- helpers ported from the design ---- */
.myur-link {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.myur-link:hover { color: hsl(var(--accent)); }

.myur-mark {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-weight: 500;
  letter-spacing: -.01em;
}

.myur-card {
  transition: border-color .15s ease, transform .15s ease;
}
.myur-card:hover {
  border-color: hsl(var(--accent) / .55);
  transform: translateY(-2px);
}

/* theme toggle icon swap */
.myur-toggle { transition: transform .12s ease; }
.myur-toggle:active { transform: translateY(1px); }
.myur-toggle .sun { display: none; }
.myur-toggle .moon { display: block; }
.dark .myur-toggle .sun { display: block; }
.dark .myur-toggle .moon { display: none; }

/* ---- Button (reproduces OsprioView.Button) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}

.btn-primary {
  background: hsl(var(--btn-bg));
  border-color: hsl(var(--btn-bg));
  color: hsl(var(--btn-fg));
}
.btn-primary:hover {
  background: hsl(var(--btn-bg-hover));
  border-color: hsl(var(--btn-bg-hover));
}

.btn-outline {
  background: transparent;
  border-color: hsl(var(--button-outline));
  color: hsl(var(--foreground));
}
.btn-outline:hover {
  background: hsl(var(--accent) / .06);
  border-color: hsl(var(--accent) / .5);
}

/* ---- Badge (reproduces OsprioView.Badge) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
.badge-default {
  background: hsl(var(--amber));
  color: hsl(var(--btn-fg));
}
.badge-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--badge-outline));
}

/* ---- responsive ---- */
@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .split { grid-template-columns: 1fr !important; gap: 20px !important; }
  .nav-links .nav-item { display: none; }
  .hero-h1 { font-size: 44px !important; }
  .contact-h2 { font-size: 40px !important; }
  .section { padding-left: 24px !important; padding-right: 24px !important; }
  .nav-inner { padding-left: 24px !important; padding-right: 24px !important; }
  .footer-inner { padding-left: 24px !important; padding-right: 24px !important; }
}

@media (max-width: 560px) {
  .hero-h1 { font-size: 36px !important; }
}