/* The osmike brand for Atlas (osmike-web/public/index.html): warm "new dawn", Fraunces + Manrope.
   Owner: coordinator. Features use these tokens and classes; they add page-specific CSS in their own files.

   THEME AGENT NOTE (2026-09): every colour is now a token here, light by default, overridden for dark in
   TWO places that must stay in sync: `:root[data-theme="dark"]` (JS-applied, wins) and the
   `@media (prefers-color-scheme: dark)` block guarded by `:not([data-theme="light"])` (a no-JS fallback).
   Sections: use these tokens, never a hex literal, so dark mode "just works" for new pages too. See
   /assets/theme.js for how the choice is stored and applied. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #FBFAF7; --bg-rgb: 251,250,247; --card: #ffffff; --ink: #17130E; --muted: #6c6458; --faint: #9a9082; --line: #ece6dc;
  --coral: #FF8A5B; --rose: #FF6FA5; --peri: #7C7CFF; --sky: #4FC4E8; --accent: #E8553F;
  --grad: linear-gradient(100deg, var(--coral), var(--rose) 42%, var(--peri) 82%);
  --disp: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 18px; --shadow-rgb: 23,19,14; --shadow: 0 10px 30px rgba(var(--shadow-rgb), .08);

  /* status / feedback */
  --good: #1e8e5a; --bad: #c0392b;
  --warn-bg: #fff4e5; --warn-line: #f5c98b; --warn-ink: #9a4b00;

  /* soft decorative fills */
  --glow: #ffe3d6;        /* the top-of-page warm glow (onboarding, /link) */
  --img-bg: #f3e6ef;      /* placeholder behind hero / gallery images while they load */
  --placeholder: #d9d2c7; /* input placeholder text */
  --tint-warm-bg: #fbf5f1;  /* subtle warm panel (profile card, "link a PC" card) */
  --tint-hover-bg: #f6f1ec; /* menu-item hover */
  --tint-rose-bg: #fff4f8;  /* selected chip / like / menu-item */
  --tint-rose-ink: #b72d68;

  /* pastel trio used by chat bubbles and picture frames (peach / pink / periwinkle) */
  --pastel-1: #ffe9df; --pastel-2: #ffe3ef; --pastel-3: #e9e9ff;
  --pastel-1s: #ffd9c8; --pastel-2s: #ffd0e3; --pastel-3s: #dcdcff; /* stronger, for the "painting" animation */

  /* status badges (My games / devices) */
  --badge-neutral-bg: #f3efe8;
  --badge-purple-bg: #eef0ff; --badge-purple-ink: #4a4ad6;
  --badge-pink-bg: #fff0f6;   --badge-pink-ink: #c23d78;
  --badge-orange-bg: #fff4e6; --badge-orange-ink: #b3591c;
  --badge-blue-bg: #e8f7fc;   --badge-blue-ink: #1f7ea1;
  --badge-green-bg: #e9f8ee;  --badge-green-ink: #23804a;
  --badge-red-bg: #fdecea;    --badge-red-ink: #b3261e;

  /* fixed regardless of theme: an OS-style black download badge, and buttons sitting ON the gradient band */
  --os-badge-bg: #17130E; --os-badge-ink: #fff;
  --on-grad-bg: #fff; --on-grad-ink: #17130E;
}

/* ---------- dark palette: kept warm (a deep charcoal, not black), the dawn gradient survives ---------- */
:root[data-theme="dark"] {
  --bg: #1A1510; --bg-rgb: 26,21,16; --card: #241D16; --ink: #F3ECE1; --muted: #B7AC9B; --faint: #8B8172; --line: #3B3226;
  --coral: #FF9A6E; --rose: #FF7FAE; --peri: #9393FF; --sky: #63CDEA; --accent: #FF7A61;
  --shadow-rgb: 0,0,0; --shadow: 0 10px 30px rgba(var(--shadow-rgb), .45);

  --good: #4DDB98; --bad: #FF6F5E;
  --warn-bg: #3A2C14; --warn-line: #6B4A1F; --warn-ink: #FFB066;

  --glow: #3A2318; --img-bg: #2A2230; --placeholder: #5B4F40;
  --tint-warm-bg: #241D16; --tint-hover-bg: #2A2319; --tint-rose-bg: #3A2430; --tint-rose-ink: #FF9DC4;

  --pastel-1: #3A2C24; --pastel-2: #3A2530; --pastel-3: #26263F;
  --pastel-1s: #4A3628; --pastel-2s: #4A2C3A; --pastel-3s: #302F52;

  --badge-neutral-bg: #2E281F;
  --badge-purple-bg: #262452; --badge-purple-ink: #B7B6FF;
  --badge-pink-bg: #3A2432;   --badge-pink-ink: #FF9DC4;
  --badge-orange-bg: #3A2814; --badge-orange-ink: #FFB066;
  --badge-blue-bg: #123039;   --badge-blue-ink: #7CD4F0;
  --badge-green-bg: #163B28;  --badge-green-ink: #6FDB9C;
  --badge-red-bg: #3A1E1B;    --badge-red-ink: #FF8F85;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1510; --bg-rgb: 26,21,16; --card: #241D16; --ink: #F3ECE1; --muted: #B7AC9B; --faint: #8B8172; --line: #3B3226;
    --coral: #FF9A6E; --rose: #FF7FAE; --peri: #9393FF; --sky: #63CDEA; --accent: #FF7A61;
    --shadow-rgb: 0,0,0; --shadow: 0 10px 30px rgba(var(--shadow-rgb), .45);

    --good: #4DDB98; --bad: #FF6F5E;
    --warn-bg: #3A2C14; --warn-line: #6B4A1F; --warn-ink: #FFB066;

    --glow: #3A2318; --img-bg: #2A2230; --placeholder: #5B4F40;
    --tint-warm-bg: #241D16; --tint-hover-bg: #2A2319; --tint-rose-bg: #3A2430; --tint-rose-ink: #FF9DC4;

    --pastel-1: #3A2C24; --pastel-2: #3A2530; --pastel-3: #26263F;
    --pastel-1s: #4A3628; --pastel-2s: #4A2C3A; --pastel-3s: #302F52;

    --badge-neutral-bg: #2E281F;
    --badge-purple-bg: #262452; --badge-purple-ink: #B7B6FF;
    --badge-pink-bg: #3A2432;   --badge-pink-ink: #FF9DC4;
    --badge-orange-bg: #3A2814; --badge-orange-ink: #FFB066;
    --badge-blue-bg: #123039;   --badge-blue-ink: #7CD4F0;
    --badge-green-bg: #163B28;  --badge-green-ink: #6FDB9C;
    --badge-red-bg: #3A1E1B;    --badge-red-ink: #FF8F85;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--disp); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .4em; }
h1 { font-size: clamp(34px, 5.2vw, 60px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: 21px; }
a { color: inherit; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px;
       padding: 13px 24px; font: 700 16px var(--sans); text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(255, 111, 165, .35); }
.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.chip { display: inline-block; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer; color: var(--ink); }
.chip.on { border-color: var(--rose); background: var(--tint-rose-bg); }
input[type=text], input[type=number], select, textarea {
  width: 100%; font: 16px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; outline: none;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus { border-color: var(--peri); box-shadow: 0 0 0 3px rgba(124, 124, 255, .15); }
[hidden] { display: none !important; }