/* ==========================================================================
   aashik.xyz brand — Simple / Modern / Bold
   Charcoal #31383E · Orange #FF9700 · Space Grotesk (Bold for logo/headings,
   Regular for text). Used by the homepage, project password page and admin.
   ========================================================================== */

/* Space Grotesk, self-hosted (SIL Open Font License, see /assets/fonts/OFL.txt) */
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}

:root {
  --charcoal: #31383E;
  --orange:   #FF9700;

  /* light (default) */
  --bg:      #F7F7F5;
  --surface: #FFFFFF;
  --text:    #31383E;
  --muted:   #6A7177;
  --line:    #E2E2DD;
  --soft:    #EEEEEA;
  --field:   #FFFFFF;
  --hover:   #EFEFEB;
  --accent:  #FF9700;
  --on-accent: #31383E;          /* text on orange buttons */
  --ok: #17703F;  --ok-bg: #E6F4EC;
  --err: #B42318; --err-bg: #FDECEA;
  --warn: #8A5300; --warn-bg: #FFF1DB;

  --font: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #31383E; --surface: #3A4248; --text: #F7F7F5; --muted: #AAB1B6; --line: #485058;
  --soft: #3A4248; --field: #2A3035; --hover: #3A4248;
  --ok: #6FD49A; --ok-bg: #22392D; --err: #FF8A7F; --err-bg: #4A2B2A; --warn: #FFC064; --warn-bg: #4A3A1E;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #31383E; --surface: #3A4248; --text: #F7F7F5; --muted: #AAB1B6; --line: #485058;
    --soft: #3A4248; --field: #2A3035; --hover: #3A4248;
    --ok: #6FD49A; --ok-bg: #22392D; --err: #FF8A7F; --err-bg: #4A2B2A; --warn: #FFC064; --warn-bg: #4A3A1E;
    color-scheme: dark;
  }
}

::selection { background: var(--orange); color: var(--charcoal); }

/* ---- logo: "aashik" + orange ".xyz", Space Grotesk Bold ---- */
.logo {
  font-family: var(--font); font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.logo span { color: var(--orange); }
.logo .logo-tag { font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: .5em; font-size: .8em; }

/* ---- accent dot (brand element) ---- */
.dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--orange); flex: none; }

/* ---- light / dark switch ---- */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer;
}
.theme-btn:hover { color: var(--text); border-color: var(--text); }
.theme-btn svg { display: block; width: 16px; height: 16px; margin: 0; }
.theme-btn .i-sun, [data-theme="dark"] .theme-btn .i-moon { display: none; }
[data-theme="dark"] .theme-btn .i-sun { display: block; }

/* ---- keyboard focus in brand orange ---- */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }