/* ARIS OS — shared design system (F7), themeable.
 *
 * One source of truth for the whole ecosystem's look. LIGHT by default (clean,
 * GitHub-repository-template style: white cards, soft borders, gentle shadows);
 * a DARK theme activates under `:root[data-theme="dark"]`. Pages consume the
 * `--aris-*` tokens, so flipping the attribute re-themes everything. The desktop
 * app mirrors the LIGHT palette so app and web look identical.
 *
 * Theme is toggled by /aris-ui.js (sets data-theme + persists to localStorage).
 */

:root {
  /* ── Surfaces (LIGHT) ─────────────────────────────────────────────────── */
  --aris-bg:        #f6f8fa; /* page */
  --aris-bg-2:      #eef1f4; /* sunken */
  --aris-surface:   #ffffff; /* card */
  --aris-card:      #ffffff; /* alias of surface (legacy token name) */
  --aris-glass:     rgba(255, 255, 255, 0.72); /* translucent surface */
  --aris-line:      #d0d7de; /* hairline border */
  --aris-line-2:    #afb8c1; /* stronger border */
  --aris-hover:     #f3f4f6; /* row/element hover */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --aris-text:      #1f2328; /* primary */
  --aris-muted:     #656d76; /* secondary */
  --aris-dim:       #8c959f; /* tertiary / captions */

  /* ── Brand + semantic ─────────────────────────────────────────────────── */
  --aris-accent:    #7b6cff; /* ARIS violet — primary brand */
  --aris-accent-2:  #6a5bff; /* darker stop for gradients */
  --aris-accent-fg: #ffffff; /* text on accent */
  --aris-accent-soft: #eeebff; /* tinted accent background */
  --aris-teal:      #1f7a8c;
  --aris-green:     #1a7f37; /* success / "up" */
  --aris-pink:      #bf3989;
  --aris-amber:     #9a6700; /* warning */
  --aris-red:       #cf222e; /* error / destructive */

  /* ── Geometry, motion, type ───────────────────────────────────────────── */
  --aris-radius:    12px;
  --aris-radius-sm: 8px;
  --aris-blur:      blur(12px) saturate(140%);
  --aris-shadow:    0 1px 3px rgba(31, 35, 40, 0.10), 0 1px 2px rgba(31, 35, 40, 0.06);
  --aris-shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.12);
  --aris-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --aris-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --aris-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --aris-gradient:  linear-gradient(135deg, var(--aris-accent), var(--aris-accent-2));
}

:root[data-theme="dark"] {
  /* ── Surfaces (DARK) ──────────────────────────────────────────────────── */
  --aris-bg:        #0d1117;
  --aris-bg-2:      #010409;
  --aris-surface:   #161b22;
  --aris-card:      #161b22;
  --aris-glass:     rgba(22, 27, 34, 0.72);
  --aris-line:      #30363d;
  --aris-line-2:    #444c56;
  --aris-hover:     #1c2128;

  --aris-text:      #e6edf3;
  --aris-muted:     #8b949e;
  --aris-dim:       #6e7681;

  --aris-accent:    #a371f7;
  --aris-accent-2:  #8957e5;
  --aris-accent-fg: #ffffff;
  --aris-accent-soft: #21203a;
  --aris-teal:      #56d4dd;
  --aris-green:     #3fb950;
  --aris-pink:      #db61a2;
  --aris-amber:     #d29922;
  --aris-red:       #f85149;

  --aris-shadow:    0 1px 3px rgba(1, 4, 9, 0.5);
  --aris-shadow-lg: 0 12px 32px rgba(1, 4, 9, 0.6);
}

/* Smooth the flip; honour reduced-motion. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ── Primitives ─────────────────────────────────────────────────────────── */

.aris-mono { font-family: var(--aris-font-mono); }

.aris-surface, .aris-glass {
  background: var(--aris-glass);
  backdrop-filter: var(--aris-blur);
  -webkit-backdrop-filter: var(--aris-blur);
  border: 1px solid var(--aris-line);
  border-radius: var(--aris-radius);
}

.aris-panel {
  background: var(--aris-card);
  border: 1px solid var(--aris-line);
  border-radius: var(--aris-radius);
  box-shadow: var(--aris-shadow);
}

.aris-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--aris-gradient);
  color: var(--aris-accent-fg); border: 0; border-radius: var(--aris-radius-sm);
  padding: 9px 15px; font-weight: 600; font-size: 13px; cursor: pointer;
  transition: transform 0.15s var(--aris-ease), filter 0.15s var(--aris-ease);
}
.aris-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

.aris-btn-ghost {
  background: var(--aris-surface); border: 1px solid var(--aris-line);
  color: var(--aris-text);
}
.aris-btn-ghost:hover { background: var(--aris-hover); filter: none; transform: none; }

.aris-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--aris-bg-2); border: 1px solid var(--aris-line);
  color: var(--aris-muted);
}
.aris-chip.is-ok   { color: var(--aris-green); border-color: color-mix(in srgb, var(--aris-green) 35%, transparent); }
.aris-chip.is-warn { color: var(--aris-amber); border-color: color-mix(in srgb, var(--aris-amber) 35%, transparent); }
.aris-chip.is-err  { color: var(--aris-red);   border-color: color-mix(in srgb, var(--aris-red) 35%, transparent); }

/* ── Theme toggle button (injected by /aris-ui.js) ──────────────────────── */
.aris-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  background: var(--aris-surface); border: 1px solid var(--aris-line);
  color: var(--aris-muted); font-size: 15px; line-height: 1;
  transition: background 0.15s var(--aris-ease), color 0.15s var(--aris-ease);
}
.aris-theme-toggle:hover { background: var(--aris-hover); color: var(--aris-text); }

/* ── Motion — shared ambient keyframes (used by the landing page) ────────── */
@keyframes aris-hue   { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes aris-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes aris-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--aris-green) 60%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes aris-drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 80px) scale(1.12); } }
@keyframes aris-drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-80px, 60px) scale(1.08); } }
@keyframes aris-drift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -70px) scale(1.15); } }

.aris-pulse { animation: aris-pulse 2s infinite; }
.aris-float { animation: aris-float 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .aris-pulse, .aris-float { animation: none; }
}