/* Reachy Web — Space landing page (Tailwind v4 source, builds to ../style.css) */

@import "tailwindcss";
@source "../../index.html";

/* Fonts (self-hosted, variable weight) */
@font-face { font-family: 'Space Grotesk'; src: url("/reachy_web/static/fonts/SpaceGrotesk.ttf") format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url("/reachy_web/static/fonts/Manrope.ttf") format('truetype'); font-weight: 100 900; font-display: swap; }

/* Tokens — dark default. Themes (data-theme) and palettes (data-palette) swap
   these variables; every Tailwind color utility below follows along. */
:root {
  color-scheme: dark;
  accent-color: var(--acc);
  --bg: #0b0e14;
  --card: #151923;
  --soft: #0f1320;
  --line: #1e2533;
  --txt: #e8eaed;
  --mut: #8a909a;
  --acc: #3b82f6;
  --ok: #27c281;
}

[data-theme=light] { color-scheme: light; --bg: #eef1f7; --card: #fff; --soft: #f1f4f9; --line: #d9dfea; --txt: #1b2330; --mut: #5b6675; --acc: #2563eb; --ok: #16a34a; }

/* Palettes (from PiWRT) */
:root[data-palette=ocean] { --bg: #0a141c; --card: #11202e; --soft: #1a3a48; --line: #1f3245; --txt: #e1ecf4; --mut: #85a1b5; --acc: #22d3ee; }
:root[data-palette=ocean][data-theme=light] { --bg: #f0f7fa; --card: #fff; --soft: #cfeaf1; --line: #dde9f0; --txt: #0f1b26; --mut: #5a7387; --acc: #0891b2; }
:root[data-palette=violet] { --bg: #15101f; --card: #1f1a2e; --soft: #2a2342; --line: #2e2942; --txt: #f1edf8; --mut: #a19bb5; --acc: #a78bfa; }
:root[data-palette=violet][data-theme=light] { --bg: #f7f4fb; --card: #fff; --soft: #efe9fa; --line: #e6e0ef; --txt: #1f1b2c; --mut: #6b6480; --acc: #7c3aed; }
:root[data-palette=sunset] { --bg: #1c100a; --card: #2a180f; --soft: #3d2412; --line: #3d2415; --txt: #f5e6d8; --mut: #b59880; --acc: #fb923c; }
:root[data-palette=sunset][data-theme=light] { --bg: #fff7f0; --card: #fff; --soft: #fce7d6; --line: #f5e6d8; --txt: #2c1810; --mut: #7a5a45; --acc: #ea580c; }
:root[data-palette=forest] { --bg: #0e140f; --card: #172218; --soft: #1a3422; --line: #1f2a1f; --txt: #e8f0e5; --mut: #8fa088; --acc: #4ade80; }
:root[data-palette=forest][data-theme=light] { --bg: #f4f8f1; --card: #fff; --soft: #dcefde; --line: #dde5d6; --txt: #1a2614; --mut: #5f6e55; --acc: #16a34a; }
:root[data-palette=rose] { --bg: #1a0b12; --card: #2a1320; --soft: #3d1a2d; --line: #3d1a2a; --txt: #fdf2f8; --mut: #c49aab; --acc: #fb7185; }
:root[data-palette=rose][data-theme=light] { --bg: #fdf2f8; --card: #fff; --soft: #fbe0ea; --line: #f4d9e2; --txt: #1f0e15; --mut: #7a4757; --acc: #e11d48; }
:root[data-palette=mint] { --bg: #06181a; --card: #0e2426; --soft: #133a35; --line: #1b3638; --txt: #e0f5ee; --mut: #7fa89a; --acc: #5eead4; }
:root[data-palette=mint][data-theme=light] { --bg: #f0fbf6; --card: #fff; --soft: #ccf1e8; --line: #d5ede0; --txt: #0a2e20; --mut: #5c7c6e; --acc: #14b8a6; }
:root[data-palette=amber] { --bg: #101114; --card: #1a1c20; --soft: #26292f; --line: #2e323a; --txt: #eceef2; --mut: #9aa0aa; --acc: #e9a23b; }
:root[data-palette=amber][data-theme=light] { --bg: #fafafb; --card: #fff; --soft: #f1f2f4; --line: #e2e5ea; --txt: #17191d; --mut: #5f6672; --acc: #b9761a; }
:root[data-palette=slate] { --bg: #0f172a; --card: #1e293b; --soft: #1e2b40; --line: #334155; --txt: #f1f5f9; --mut: #94a3b8; --acc: #94a3b8; }
:root[data-palette=slate][data-theme=light] { --bg: #f8fafc; --card: #fff; --soft: #e2e8f0; --line: #e2e8f0; --txt: #0f172a; --mut: #64748b; --acc: #475569; }
:root[data-palette=nordic] { --bg: #2e3440; --card: #3b4252; --soft: #3f4f65; --line: #4c566a; --txt: #eceff4; --mut: #a8b0bf; --acc: #88c0d0; }
:root[data-palette=nordic][data-theme=light] { --bg: #eceff4; --card: #fff; --soft: #e5ecf3; --line: #d8dee9; --txt: #2e3440; --mut: #4c566a; --acc: #5e81ac; }
:root[data-palette=one-dark] { --bg: #0e1015; --card: #1b1d22; --soft: #21304a; --line: #2a2d34; --txt: #abb2bf; --mut: #5c6370; --acc: #61afef; }
:root[data-palette=one-dark][data-theme=light] { --bg: #fafafa; --card: #fff; --soft: #dbe7fb; --line: #e5e5e6; --txt: #383a42; --mut: #6b6f76; --acc: #4078f2; }
:root[data-palette=midnight] { --bg: #000; --card: #0a0a0a; --soft: #1a1b3a; --line: #1a1a1a; --txt: #fafafa; --mut: #888; --acc: #818cf8; }
:root[data-palette=midnight][data-theme=light] { --bg: #fff; --card: #f5f5f5; --soft: #e0e1fb; --line: #e5e5e5; --txt: #000; --mut: #666; --acc: #4f46e5; }
:root[data-palette=matrix] { --bg: #000; --card: #0a140a; --soft: #0e1f0e; --line: #163a16; --txt: #4dff77; --mut: #2e9a4f; --acc: #00ff41; }
:root[data-palette=matrix][data-theme=light] { --bg: #eefbf1; --card: #fff; --soft: #d6f7dd; --line: #c3eece; --txt: #08350f; --mut: #4a7d57; --acc: #0ba21e; }

/* Map the tokens into Tailwind so bg-bg, text-txt, border-line, text-acc,
   bg-card, bg-soft, text-mut, bg-ok… exist as utilities and react to the
   palette/theme switches. */
@theme inline {
  --color-bg: var(--bg);
  --color-card: var(--card);
  --color-soft: var(--soft);
  --color-line: var(--line);
  --color-txt: var(--txt);
  --color-mut: var(--mut);
  --color-acc: var(--acc);
  --color-ok: var(--ok);
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
}

@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    background: radial-gradient(1200px 600px at 50% -10%, var(--soft), var(--bg)) fixed;
    color: var(--txt);
    line-height: 1.6;
    transition: background 0.25s, color 0.25s;
  }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
  a { color: var(--acc); text-decoration: none; transition: color 0.2s; }
  a:hover { color: color-mix(in srgb, var(--acc) 70%, var(--txt)); }
}

/* Stateful / repeated components the JS toggles (.on, .hidden) or builds
   at runtime (changelog cards) — everything else is utilities in the HTML. */
@layer components {
  .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 8px 24px #00000040;
    transition: border-color 0.2s, transform 0.2s, background-color 0.25s;
  }
  [data-theme=light] .card { box-shadow: 0 6px 18px #141e3c14; }

  .btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
  }
  .btn.primary {
    background: var(--acc);
    color: var(--bg);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--acc) 35%, transparent);
  }
  .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 26px color-mix(in srgb, var(--acc) 45%, transparent); }
  .btn.ghost { background: var(--soft); border: 1px solid var(--line); color: var(--txt); }
  .btn.ghost:hover { border-color: var(--acc); }

  .chip {
    background: color-mix(in srgb, var(--acc) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--line));
    padding: 6px 13px;
    border-radius: 9px;
    font-size: 0.83rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--acc) 70%, var(--txt));
  }

  .version-pill {
    background: var(--acc);
    color: var(--bg);
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
  }

  .pdot {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer; padding: 0;
    transition: transform 0.15s, border-color 0.15s;
  }
  .pdot:hover { transform: scale(1.2); }
  .pdot.on { border-color: var(--txt); transform: scale(1.15); }

  .ios {
    appearance: none; border: none; position: relative;
    width: 38px; height: 22px; border-radius: 999px;
    background: var(--line); cursor: pointer; flex: none; padding: 0;
    transition: background-color 0.18s;
  }
  .ios:after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px #00000059;
    transition: transform 0.18s;
  }
  .ios.on { background: var(--acc); }
  .ios.on:after { transform: translateX(16px); }

  .seg {
    display: inline-flex; gap: 4px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px; padding: 4px;
  }
  .seg button {
    border: none; cursor: pointer; border-radius: 9px;
    background: transparent; color: var(--mut);
    font-family: inherit; font-weight: 600; font-size: 0.85rem;
    padding: 8px 16px;
    transition: background-color 0.18s, color 0.18s;
  }
  .seg button:hover:not(.on) { background: color-mix(in srgb, var(--acc) 14%, var(--card)); color: var(--txt); }
  .seg button.on { background: var(--acc); color: var(--bg); }

  .status-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--ok); margin-right: 7px; box-shadow: 0 0 8px var(--ok);
  }

  .code-block {
    background: color-mix(in srgb, var(--bg) 70%, black);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    overflow-x: auto;
  }
  [data-theme=light] .code-block { background: #0f1320; }
  .code-block code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.82rem;
    color: #e8eaed;
    white-space: pre;
  }

  /* built by JS from changelog.json */
  .changelog-card .version-badge {
    display: inline-block;
    background: var(--acc); color: var(--bg);
    padding: 3px 11px; border-radius: 7px;
    font-size: 0.82rem; font-weight: 700; margin-bottom: 6px;
  }
  .changelog-card .date { color: var(--mut); font-size: 0.83rem; display: block; margin-bottom: 10px; }
  .changelog-card ul { list-style: none; margin: 0; padding: 0; }
  .changelog-card li { color: var(--mut); font-size: 0.9rem; padding: 3px 0 3px 16px; position: relative; }
  .changelog-card li::before { content: '→'; position: absolute; left: 0; color: var(--acc); }
}