/* Direction: cinematic dark-maroon creative agency workspace (Nexora).
   Dark-first: :root is the deep-oxblood mode; light mode is a warm parchment
   variant that keeps the same wine-and-burgundy identity. */

:root {
  color-scheme: dark;
  --canvas: #1A0B0D;
  --surface: #241013;
  --surface-2: #321619;
  --border: #4A2529;
  --border-strong: #5c3136;
  --ink: #F7EEEE;
  --muted: #BFA5A8;
  --accent: #9E3B46;
  --accent-hover: #B24955;
  --accent-ink: #F7EEEE;
  --accent-text: #D98B91;
  --accent-strong: #D98B91;
  --accent-soft: #3D1B1F;
  --accent-border: #6b3038;
  --success: #4f9463;
  --success-ink: #0d1c11;
  --success-soft: #1c2f21;
  --success-strong: #8fc99e;
  --warning: #c99a4b;
  --warning-ink: #241a06;
  --warning-soft: #332711;
  --warning-strong: #e0b876;
  --danger: #b5525c;
  --danger-ink: #241012;
  --danger-soft: #3a1e21;
  --danger-strong: #e2929a;
  --chart-1: #D98B91;
  --chart-2: #C45A63;
  --chart-3: #9E3B46;
  --chart-4: #e0b876;
  --chart-5: #8fc99e;
  --chart-6: #BFA5A8;

  --font-display: "Fraunces", Georgia, serif;
  --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, monospace;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;

  --radius-card: 18px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --shadow-card: 0 18px 40px -22px rgba(0,0,0,0.7);
  --shadow-raised: 0 24px 60px -20px rgba(0,0,0,0.75);
  --card-pad: 1.5rem;

  --x-hover: #552329;
  --gradient-header: linear-gradient(135deg, #3D1B1F 0%, #321619 45%, #241013 100%);
  --gradient-band: linear-gradient(180deg, #241013 0%, #1A0B0D 100%);
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #F7EEEE;
  --surface: #FFFBFA;
  --surface-2: #F1E1E1;
  --border: #E3CBCD;
  --border-strong: #CDA9AC;
  --ink: #2B1215;
  --muted: #7A5458;
  --accent: #9E3B46;
  --accent-hover: #86323C;
  --accent-ink: #FFFBFA;
  --accent-text: #86323C;
  --accent-strong: #7A2C36;
  --accent-soft: #F1DADC;
  --accent-border: #D9AFB3;
  --success: #2f7a45;
  --success-ink: #ffffff;
  --success-soft: #e3f0e6;
  --success-strong: #256838;
  --warning: #9a6a1f;
  --warning-ink: #ffffff;
  --warning-soft: #f3e7d2;
  --warning-strong: #7d5518;
  --danger: #a13e47;
  --danger-ink: #ffffff;
  --danger-soft: #f3dee0;
  --danger-strong: #8a3037;
  --chart-1: #9E3B46;
  --chart-2: #C45A63;
  --chart-3: #86323C;
  --chart-4: #9a6a1f;
  --chart-5: #2f7a45;
  --chart-6: #7A5458;

  --gradient-header: linear-gradient(135deg, #F1DADC 0%, #F1E1E1 45%, #F7EEEE 100%);
  --gradient-band: linear-gradient(180deg, #F1E1E1 0%, #F7EEEE 100%);
  --x-hover: #F1DADC;
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */

.nx-header {
  background: var(--gradient-header);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.nx-sidebar {
  background: var(--gradient-band);
}

.nx-sidebar-link[aria-current="page"] {
  background: var(--x-hover, var(--surface-2));
  color: var(--ink);
}

.nx-sidebar-link[aria-current="page"] {
  position: relative;
}
.nx-sidebar-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -0.6rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 3px;
  border-radius: 999px;
  background: var(--accent-strong);
}

@keyframes nx-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
[data-inview] { animation: nx-rise 480ms cubic-bezier(.2,.8,.2,1) both; }
html.reduced-motion [data-inview] { animation: none; }

.nx-auth-art {
  background: radial-gradient(circle at 30% 20%, rgba(217, 139, 145, 0.16), transparent 55%),
    var(--gradient-header);
}