/* Roven Systems — canonical design tokens.
   Source of truth: docs/design-language.md + docs/build-plan.md §C.
   This file is byte-identical in home/assets/css/ and web/assets/.
   DO NOT EDIT EITHER COPY. Change docs/build-plan.md §C, then both files. */

:root {
  /* ── Type ─────────────────────────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display-italic: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  --text-hero:     clamp(2.75rem, 2rem + 3.5vw, 5.5rem);
  --text-h1:       3.5rem;
  --text-h2:       2.5rem;
  --text-h3:       1.75rem;
  --text-h4:       1.375rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-small:    0.875rem;
  --text-caption:  0.75rem;

  /* ── Space ────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;    --space-11: 10rem;

  /* ── Measure ──────────────────────────────────────────────────────── */
  --content-max: 75rem;
  --wide-max: 90rem;
  --prose-max: 68ch;
  --column-max: 56rem;   /* the app console's single column */

  /* ── Breakpoints (reference values; media queries must inline them) ─ */
  --bp-sm: 30em; --bp-md: 48em; --bp-lg: 64em; --bp-xl: 80em; --bp-2xl: 96em;

  /* ── Radius ───────────────────────────────────────────────────────── */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --radius-xl: 24px; --radius-pill: 999px;

  /* ── Motion ───────────────────────────────────────────────────────── */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-moderate: 320ms;
  --dur-slow: 480ms; --dur-reveal: 600ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Surfaces + ink (LIGHT is the bare :root default) ─────────────── */
  --surface-0: #FFFFFF;
  --surface-1: #F4F4F2;
  --surface-2: #E9E9E5;
  --border: #E2E2DD;
  --border-strong: #CBCBC4;
  --ink: #0A0A0A;
  --ink-soft: #5B5D58;
  --ink-faint: #8B8D86;

  /* ── Accent ───────────────────────────────────────────────────────── */
  --accent: #4B3CFF;
  --accent-strong: #3A2ECC;
  --accent-soft: #ECEAFF;
  --on-accent: #FFFFFF;

  /* ── Status ───────────────────────────────────────────────────────── */
  --status-active-text:   #0F7A38;
  --status-active-fill:   #22C55E;
  --status-paused-text:   #8A6100;
  --status-paused-fill:   #F5B400;
  --status-inactive-text: #B3261E;
  --status-inactive-fill: #EF4444;
  --status-unsynced-text: #1D4ED8;
  --status-unsynced-fill: #3B82F6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #0A0A0C;
    --surface-1: #131316;
    --surface-2: #1C1C20;
    --border: #2A2A2E;
    --border-strong: #3A3A40;
    --ink: #F5F5F3;
    --ink-soft: #A8A8A3;
    --ink-faint: #6F6F6B;
    --accent: #8577FF;
    --accent-strong: #A29AFF;
    --accent-soft: #201C40;
    --on-accent: #0A0A0C;
    --status-active-text:   #4ADE80;
    --status-active-fill:   #34D399;
    --status-paused-text:   #FBBF24;
    --status-paused-fill:   #FBBF24;
    --status-inactive-text: #F87171;
    --status-inactive-fill: #F87171;
    --status-unsynced-text: #60A5FA;
    --status-unsynced-fill: #60A5FA;
  }
}

:root[data-theme="dark"] {
  --surface-0: #0A0A0C;
  --surface-1: #131316;
  --surface-2: #1C1C20;
  --border: #2A2A2E;
  --border-strong: #3A3A40;
  --ink: #F5F5F3;
  --ink-soft: #A8A8A3;
  --ink-faint: #6F6F6B;
  --accent: #8577FF;
  --accent-strong: #A29AFF;
  --accent-soft: #201C40;
  --on-accent: #0A0A0C;
  --status-active-text:   #4ADE80;
  --status-active-fill:   #34D399;
  --status-paused-text:   #FBBF24;
  --status-paused-fill:   #FBBF24;
  --status-inactive-text: #F87171;
  --status-inactive-fill: #F87171;
  --status-unsynced-text: #60A5FA;
  --status-unsynced-fill: #60A5FA;
}

:root[data-theme="light"] {
  --surface-0: #FFFFFF;
  --surface-1: #F4F4F2;
  --surface-2: #E9E9E5;
  --border: #E2E2DD;
  --border-strong: #CBCBC4;
  --ink: #0A0A0A;
  --ink-soft: #5B5D58;
  --ink-faint: #8B8D86;
  --accent: #4B3CFF;
  --accent-strong: #3A2ECC;
  --accent-soft: #ECEAFF;
  --on-accent: #FFFFFF;
  --status-active-text:   #0F7A38;
  --status-active-fill:   #22C55E;
  --status-paused-text:   #8A6100;
  --status-paused-fill:   #F5B400;
  --status-inactive-text: #B3261E;
  --status-inactive-fill: #EF4444;
  --status-unsynced-text: #1D4ED8;
  --status-unsynced-fill: #3B82F6;
}

/* ── Marketing section bands (home/ only; inert in the app) ─────────── */
.section--light { --section-bg:#FFFFFF; --section-ink:#0A0A0A; --section-ink-soft:#5B5D58; --section-border:#E2E2DD; }
.section--dark  { --section-bg:#0A0A0C; --section-ink:#F5F5F3; --section-ink-soft:#A8A8A3; --section-border:#29292E; }
.section--tint  { --section-bg:#F1EFFF; --section-ink:#0A0A0A; --section-ink-soft:#4A4680; --section-border:#D9D4FF; }

/* ── Status dot — identical on both surfaces ───────────────────────── */
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; position:relative; flex:0 0 auto; }
.status-dot--active   { background: var(--status-active-fill); }
.status-dot--paused   { background: var(--status-paused-fill); }
.status-dot--inactive { background: var(--status-inactive-fill); }
.status-dot--unsynced { background: var(--status-unsynced-fill); }
.status-dot--active::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--status-active-fill);
  animation: dot-pulse 2s var(--ease-standard) infinite;
}
@keyframes dot-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot--active::after { animation: none; display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}