/* ─────────────────────────────────────────────────────────────────
   style.css — raghav56.tech
   Requires: flexoki.css (loaded first, provides --fl-* raw palette)

   Layers:
     1. [data-theme] blocks  — map --fl-* or raw hex → site tokens
     2. Component rules      — reference only site tokens (--color-*)
   ──────────────────────────────────────────────────────────────── */

/* ── Theme tokens ─────────────────────────────────────────────────
   Each block defines the same set of --color-* vars.
   Components only reference --color-*, never raw hex or --fl-*.
   ──────────────────────────────────────────────────────────────── */

[data-theme="terminal-dark"] {
  color-scheme: dark;
  --color-bg:         #000000;
  --color-bg2:        #0d0d0d;
  --color-border:     #87ff8733;
  --color-glow:       #87ff8712;
  --color-text:       #ffd7af;
  --color-muted:      #666666;
  --color-accent:     #87ff87;
  --color-link:       #5fffff;
  --color-nav-hover:  #1a1a1a;
  --color-cursor:     #ffd7af;
  --font-body:        "Fira Mono", monospace;
}

[data-theme="professional-light"] {
  color-scheme: light;
  --color-bg:         #f7f7f5;
  --color-bg2:        #ffffff;
  --color-border:     #d1d5db;
  --color-glow:       #1d4ed808;
  --color-text:       #111827;
  --color-muted:      #6b7280;
  --color-accent:     #1d4ed8;
  --color-link:       #1d4ed8;
  --color-nav-hover:  #eff6ff;
  --color-cursor:     #1d4ed8;
  --font-body:        "Inter", system-ui, sans-serif;
}

/* Flexoki themes: bridge --fl-* semantic tokens → site --color-* tokens.
   We set --fl-* explicitly so theme is independent of OS preference. */

[data-theme="flexoki-dark"] {
  color-scheme: dark;
  /* Override flexoki.css semantic tokens for this theme */
  --fl-bg:   #100F0F; --fl-bg-2: #1C1B1A;
  --fl-ui:   #282726; --fl-ui-2: #343331;
  --fl-tx:   #CECDC3; --fl-tx-2: #878580;
  --fl-cy:   #3AA99F; --fl-pu:   #8B7EC8;
  /* Site tokens */
  --color-bg:         var(--fl-bg);
  --color-bg2:        var(--fl-bg-2);
  --color-border:     var(--fl-ui);
  --color-glow:       #3AA99F10;
  --color-text:       var(--fl-tx);
  --color-muted:      var(--fl-tx-2);
  --color-accent:     var(--fl-cy);
  --color-link:       var(--fl-pu);
  --color-nav-hover:  var(--fl-ui-2);
  --color-cursor:     var(--fl-cy);
  --font-body:        "Fira Mono", monospace;
}

[data-theme="flexoki-light"] {
  color-scheme: light;
  /* Override flexoki.css semantic tokens for this theme */
  --fl-bg:   #FFFCF0; --fl-bg-2: #F2F0E5;
  --fl-ui:   #E6E4D9; --fl-ui-2: #DAD8CE;
  --fl-tx:   #100F0F; --fl-tx-2: #6F6E69;
  --fl-cy:   #24837B; --fl-pu:   #5E409D;
  /* Site tokens */
  --color-bg:         var(--fl-bg);
  --color-bg2:        var(--fl-bg-2);
  --color-border:     var(--fl-ui);
  --color-glow:       #24837B0A;
  --color-text:       var(--fl-tx);
  --color-muted:      var(--fl-tx-2);
  --color-accent:     var(--fl-cy);
  --color-link:       var(--fl-pu);
  --color-nav-hover:  var(--fl-ui-2);
  --color-cursor:     var(--fl-cy);
  --font-body:        "Fira Mono", monospace;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Base ───────────────────────────────────────────────────────── */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a, a:visited {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

a:hover {
  text-decoration: underline;
}

/* ── Layout ─────────────────────────────────────────────────────── */
#wrap {
  max-width: 740px;
  margin: 0 auto;
  padding: 16px 12px 48px;
}

/* ── Nav ────────────────────────────────────────────────────────── */
nav {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
  padding-bottom: 2px;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
}

nav li a,
nav li button {
  display: block;
  padding: 10px 14px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

nav li a:hover,
nav li button:hover {
  background: var(--color-nav-hover);
  text-decoration: none;
}

nav li a.active {
  color: var(--color-accent);
}

nav .right {
  margin-left: auto;
}

/* ── Theme picker ───────────────────────────────────────────────── */
.theme-picker {
  display: flex;
  align-items: center;
}

/* Panel: in-flow flex container that clips to zero width at rest.
   Because it's in-flow (not absolute), the mouse always stays within
   .theme-picker when moving from the main button to a dot — so
   CSS :hover works correctly with no JS toggling required. */
.theme-panel {
  display: flex;
  align-items: center;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.22s ease, opacity 0.18s ease;
}

.theme-picker:hover .theme-panel,
.theme-picker:focus-within .theme-panel {
  max-width: 160px;  /* enough for 4 dots; actual width is smaller */
  opacity: 1;
}

/* Dot buttons inside the panel */
.theme-opt {
  padding: 10px 8px;
  color: var(--color-muted);
  opacity: 0.45;
  font-family: var(--font-body);
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.theme-opt:hover { opacity: 0.8; }

/* Active dot: accent color, full opacity */
.theme-opt.active {
  color: var(--color-accent);
  opacity: 1;
}


/* ── Typography ─────────────────────────────────────────────────── */
h1 {
  color: var(--color-accent);
  font-size: 18px;
  margin-bottom: 6px;
}

.sub {
  color: var(--color-muted);
  margin-bottom: 20px;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 80px var(--color-glow);
  padding: 20px 24px;
  margin-bottom: 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 100px var(--color-glow);
  transform: translateY(-2px);
}

.card h2 {
  color: var(--color-accent);
  font-size: 13px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card p {
  color: var(--color-text);
  max-width: 580px;
}

/* ── Link & Tech grids ──────────────────────────────────────────── */
.links,
.tech-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.link-row,
.tech-row {
  display: flex;
  gap: 16px;
}

.link-row .label,
.tech-row .label {
  color: var(--color-muted);
  min-width: 60px;
}

/* ── Cursor blink ───────────────────────────────────────────────── */
.cursor::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--color-cursor);
  margin-left: 4px;
  vertical-align: middle;
  animation: blink 1.2s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ── Footer ─────────────────────────────────────────────────────── */
footer {
  text-align: center;
  color: var(--color-muted);
  font-size: 11px;
  margin-top: 32px;
}

footer a {
  color: var(--color-muted);
}

footer a:hover {
  color: var(--color-link);
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cursor::after { animation: none; }
  .card, body { transition: none; }
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  nav li a,
  nav li button { padding: 8px 10px; }

  .link-row,
  .tech-row {
    flex-direction: column;
    gap: 2px;
  }

  .link-row .label,
  .tech-row .label { min-width: unset; }
}