/* ============================================================
   theme.css — the one design system for arcapis.

   Loaded by index.html (landing), app.html (dashboard), and the
   legal pages, so a token changed here changes every surface.

   Palette rationale
   -----------------
   Ground is a near-black with a faint blue cast. Accent is CYAN, taken
   from the logo mark, and it is the only colour carrying brand weight —
   the mark has to be the loudest cyan on the page. The secondary is a
   sky blue one step off it; ambient glows are neutral white. Nothing
   here is violet: that was an earlier palette and mixing the two read
   as two different products.

   There is one theme: dark. Surfaces are opaque near-black panels; the
   only colour that carries brand weight is the cyan accent. A light
   theme existed briefly and was removed — if it ever returns it should
   be a deliberate second design, not an inversion of this one.

   Variable names are deliberately the same set the dashboard CSS
   already consumes, so the whole app re-skins from this file alone.
   ============================================================ */

:root {
  /* Surfaces — each step is a real elevation, not a tint of the last */
  --bg:            #08080C;
  --bg-elev:       #101017;
  --bg-soft:       #16161F;
  --bg-code:       #0C0C12;
  --sidebar-bg:    #0B0B11;
  --bg-hover:      #1B1B26;

  /* Lines */
  --border:        #1E1E2A;
  --border-strong: #2C2C3C;

  /* Type. --text-strong is one step past --text: reserved for emphasis
     that has to out-shout the running copy. */
  --text:          #ECECF3;
  --text-strong:   #FFFFFF;
  --text-dim:      #9A9AAE;
  --text-faint:    #6A6A7E;

  /* Accent — cyan, matched to the logo mark */
  --accent:        #22D3EE;
  --accent-hover:  #67E8F9;
  --accent-ink:    #04141A;   /* text that sits ON an accent fill */
  --accent-bg:     #0E2A33;
  --accent-glow:   rgba(34, 211, 238, 0.24);
  --accent-line:   rgba(34, 211, 238, 0.32);

  /* Secondary — a sky blue one step off the accent. It exists so a second
     figure can be highlighted without competing with the cyan, and it is
     deliberately in the same family: the previous violet read as a colour
     from a different brand. */
  --accent-deep:      #7DD3FC;
  --accent-deep-hi:   #38BDF8;
  --accent-deep-soft: #075985;

  /* The mark's own sweep, reused for the loudest control on any page. */
  --brand-gradient: linear-gradient(100deg, #67E8F9 0%, #22D3EE 46%, #0E9BB5 100%);

  /* Ambient wash behind the hero. Neutral: a coloured one read as a blotch. */
  --white-glow:    rgba(226, 236, 250, 0.14);

  /* Status */
  --warn:          #FBBF24;
  --success:       #34D399;
  --danger:        #FB7185;

  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:     0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg:     0 24px 70px rgba(0, 0, 0, 0.65);


  color-scheme: dark;
}


/* ============================================================
   SHAPE + RHYTHM — the "auto layout" primitives.
   One spacing scale, one radius scale, used everywhere instead of
   ad-hoc pixel values.
   ============================================================ */
:root {
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 112px;

  --maxw: 1160px;

  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.18s;
}

/* Honour the OS setting for anyone who asked not to see motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   LOGO — theme-aware.
   The mark is a single cyan gradient in both themes (it is the
   brand anchor); only the wordmark flips.
   ============================================================ */
.arc-mark { display: block; flex-shrink: 0; }
.wordmark {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ============================================================
   FOCUS — one visible ring for keyboard users, everywhere.
   ============================================================ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================================
   AMBIENT GLOW — the Quin-style radial wash. Purely decorative,
   so it is aria-hidden at the markup level and pointer-inert here.
   ============================================================ */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}
.glow-cyan   { background: var(--accent-glow); }
.glow-white  { background: var(--white-glow); }