/*
 * theme.css — THIS APP'S DESIGN-SYSTEM VALUES.
 * Terminal × Swiss: a dark engineering console, square corners, hairline
 * rules, monospace throughout. Opens dark; a light console sits underneath
 * for anyone who switches.
 */

:root {
  color-scheme: dark;
  --canvas: #0b0f14;
  --surface: #23272c;
  --surface-2: #2b3036;
  --border: #333941;
  --border-strong: #4a515a;
  --ink: #e6e8eb;
  --muted: #9598a0;

  --accent: #f2a93b;
  --accent-hover: #ffc267;
  --accent-ink: #191205;
  --accent-text: #61dafb;
  --accent-strong: #f6c069;
  --accent-soft: #3a2c14;
  --accent-border: #6b4c1e;

  --success: #1f7a3d;
  --success-ink: #ffffff;
  --success-soft: #122a1a;
  --success-strong: #6fcf7d;

  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #34210f;
  --warning-strong: #f0a866;

  --danger: #c0362c;
  --danger-ink: #ffffff;
  --danger-soft: #341615;
  --danger-strong: #f38b83;

  --chart-1: #f2a93b;
  --chart-2: #61dafb;
  --chart-3: #47a248;
  --chart-4: #9aa0a6;
  --chart-5: #a78bfa;
  --chart-6: #2dd4bf;

  --font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 4px;
  --radius-card: 4px;
  --radius-input: 4px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-btn: none;
  --card-pad: 2rem;
  --caps: uppercase;
  --caps-tracking: 0.08em;
  --btn-weight: 700;
  --measure: 68ch;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f2f2ee;
  --surface: #ffffff;
  --surface-2: #e9e9e4;
  --border: #d6d6d0;
  --border-strong: #b2b2aa;
  --ink: #14171a;
  --muted: #5c5f5a;

  --accent: #96590b;
  --accent-hover: #7c4a09;
  --accent-ink: #ffffff;
  --accent-text: #0369a1;
  --accent-strong: #8a550c;
  --accent-soft: #fbe7c8;
  --accent-border: #e3b667;

  --success: #1f7a3d;
  --success-ink: #ffffff;
  --success-soft: #dcefe1;
  --success-strong: #175f30;

  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f5e3d1;
  --warning-strong: #8a3f06;

  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f6dcda;
  --danger-strong: #8c1d17;

  --chart-1: #8a5a0a;
  --chart-2: #0369a1;
  --chart-3: #1f7a3d;
  --chart-4: #5c5f5a;
  --chart-5: #7c3aed;
  --chart-6: #0f766e;
}

/*
 * app.css — this app's own rules: the hero cube, the terminal caret, the
 * git-log rows, the architecture diagram and the project "screen" mockups.
 * Tokens only — every colour here is a var() from theme.css.
 */

/* ---- Motion: the ONE moment that moves — the hero, on load ------------- */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes reveal-cube {
  from { opacity: 0; transform: translateY(24px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes cube-spin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}
@keyframes caret-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.reveal-hero,
.reveal-hero-cube {
  animation: reveal-up 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.reveal-hero-cube { animation-name: reveal-cube; }

html.reduced-motion .reveal-hero,
html.reduced-motion .reveal-hero-cube {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Terminal caret, after the whoami line. Small, deliberate, always on. */
.caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.15em;
  background: var(--accent-text);
  animation: caret-blink 1.1s step-end infinite;
}
html.reduced-motion .caret { animation: none; opacity: 1; }

.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--accent-strong);
  animation: status-pulse 2.2s ease-in-out infinite;
}
html.reduced-motion .status-dot { animation: none; }

/* ---- The cube: four MERN layers wrapped around one rotating box --------- */
.cube-scene {
  perspective: 900px;
  width: 100%;
  max-width: 15rem;
  margin: 0 auto;
  height: 11.25rem;
}
.cube {
  position: relative;
  width: 11.25rem;
  height: 11.25rem;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation: cube-spin 22s linear infinite;
}
html.reduced-motion .cube { animation: none; transform: rotateX(-18deg) rotateY(28deg); }

.cube-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.25rem;
  height: 11.25rem;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cube-face-front  { transform: rotateY(0deg)    translateZ(5.625rem); color: var(--chart-2); }
.cube-face-back   { transform: rotateY(180deg)  translateZ(5.625rem); color: var(--chart-4); }
.cube-face-right  { transform: rotateY(90deg)   translateZ(5.625rem); color: var(--chart-3); }
.cube-face-left   { transform: rotateY(-90deg)  translateZ(5.625rem); color: var(--chart-3); }
.cube-face-top    { transform: rotateX(90deg)   translateZ(5.625rem); color: color-mix(in srgb, var(--chart-1) 65%, var(--ink) 35%); }
.cube-face-bottom { transform: rotateX(-90deg)  translateZ(5.625rem); color: color-mix(in srgb, var(--chart-1) 65%, var(--ink) 35%); }

/* ---- Tech tags: brand-ish colour, from the chart tokens only ------------ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid;
  border-radius: var(--radius-btn, 4px);
  padding: 0.15rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  white-space: nowrap;
}
.tag-mongo   { color: var(--chart-3); border-color: color-mix(in srgb, var(--chart-3) 45%, transparent); background: color-mix(in srgb, var(--chart-3) 12%, transparent); }
.tag-express { color: var(--chart-4); border-color: color-mix(in srgb, var(--chart-4) 45%, transparent); background: color-mix(in srgb, var(--chart-4) 12%, transparent); }
.tag-react   { color: var(--chart-2); border-color: color-mix(in srgb, var(--chart-2) 45%, transparent); background: color-mix(in srgb, var(--chart-2) 12%, transparent); }
.tag-node    { color: var(--chart-1); border-color: color-mix(in srgb, var(--chart-1) 45%, transparent); background: color-mix(in srgb, var(--chart-1) 12%, transparent); }
.tag-redis   { color: var(--chart-5); border-color: color-mix(in srgb, var(--chart-5) 45%, transparent); background: color-mix(in srgb, var(--chart-5) 12%, transparent); }
.tag-socket  { color: var(--chart-6); border-color: color-mix(in srgb, var(--chart-6) 45%, transparent); background: color-mix(in srgb, var(--chart-6) 12%, transparent); }

/* ---- Git-log formatted project list ------------------------------------- */
.gitlog { border: var(--border-w, 1px) solid var(--border); }
.gitlog-item { border-bottom: var(--border-w, 1px) solid var(--border); }
.gitlog-item:last-child { border-bottom: 0; }
.gitlog-item > .gitlog-body { border-top: var(--border-w, 1px) solid var(--border); }

.gitlog-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  transition: background-color 150ms;
}
.gitlog-row::-webkit-details-marker { display: none; }
.gitlog-item:hover > .gitlog-row { background: var(--surface-2); }
.gitlog-hash { color: var(--accent-text); flex-shrink: 0; }
.gitlog-name { color: var(--ink); font-weight: 700; flex-shrink: 0; }
.gitlog-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.gitlog-outcome { color: var(--muted); flex: 1 1 16rem; min-width: 0; }
.gitlog-chevron { margin-left: auto; color: var(--muted); display: flex; transition: transform 200ms; }
.gitlog-item[open] .gitlog-chevron { transform: rotate(180deg); }
.gitlog-body { padding: 1.5rem 1.25rem 2rem; }

/* ---- Architecture diagram: boxes and arrows, never a stat strip --------- */
.diagram { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-family: var(--font-mono); }
.diagram-node {
  border: var(--border-w, 1px) solid var(--border-strong);
  background: var(--surface-2);
  color: var(--ink);
  padding: 0.55rem 0.85rem;
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: center;
}
.diagram-node small { color: var(--muted); font-size: 0.65rem; }
.diagram-arrow { color: var(--muted); display: flex; flex-shrink: 0; }
.diagram-arrow .icon { width: 1rem; height: 1rem; }
.diagram-lg .diagram-node { padding: 1rem 1.35rem; font-size: 0.8rem; }
.diagram-sm .diagram-node { padding: 0.4rem 0.6rem; font-size: 0.68rem; }

.band-architecture {
  background:
    linear-gradient(color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px) 0 0 / 100% 2.5rem,
    var(--canvas);
}

/* ---- Fake product screen, built from tokens, not a photograph ----------- */
.screen-mock {
  border: var(--border-w, 1px) solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.screen-mock-bar {
  display: flex;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  border-bottom: var(--border-w, 1px) solid var(--border);
  background: var(--surface-2);
}
.screen-mock-bar span { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--border-strong); }
.screen-mock-body { display: flex; gap: 0.75rem; padding: 0.85rem; }
.screen-mock-side { width: 22%; min-height: 5rem; background: var(--surface-2); flex-shrink: 0; }
.screen-mock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.screen-mock-bar-chart {
  height: 3.25rem;
  background:
    linear-gradient(to top, currentColor 35%, transparent 35%) 0 0 / 12% 100% no-repeat,
    linear-gradient(to top, currentColor 60%, transparent 60%) 16% 0 / 12% 100% no-repeat,
    linear-gradient(to top, currentColor 45%, transparent 45%) 32% 0 / 12% 100% no-repeat,
    linear-gradient(to top, currentColor 80%, transparent 80%) 48% 0 / 12% 100% no-repeat,
    linear-gradient(to top, currentColor 55%, transparent 55%) 64% 0 / 12% 100% no-repeat,
    linear-gradient(to top, currentColor 70%, transparent 70%) 80% 0 / 12% 100% no-repeat;
  opacity: 0.8;
  background-color: var(--surface-2);
}
.screen-mock-rows { flex: 1; background: repeating-linear-gradient(to bottom, var(--surface-2) 0 0.5rem, transparent 0.5rem 0.85rem); }
.screen-mock-mongo .screen-mock-bar-chart { color: var(--chart-3); }
.screen-mock-redis .screen-mock-bar-chart { color: var(--chart-5); }
.screen-mock-node  .screen-mock-bar-chart { color: var(--chart-1); }