/* tokens.css — the executable form of DESIGN.md.
 *
 * Chrome values are inherited verbatim from the Linkophony editor so the two
 * products feel like one hand. Every value here that carries a contrast
 * commitment is measured by tests/contrast.py, which reads this file directly
 * so the documentation cannot drift from what ships.
 *
 * This app is dark-only by design: it is a tool opened backstage and in transit,
 * and a light theme is a second visual world to maintain for no scene we have.
 */

:root {
  /* ---- chrome ------------------------------------------------------ */
  --bg: #0C0C0E;
  --panel: #141418;
  --panel-2: #1B1B21;
  --line: #26262E;
  --text: #F2F2F4;
  --muted: #9A9AA6;
  --faint: #5E5E6C;
  --accent: #7B93FF;
  --on-accent: #0B0B10;

  --danger: #FF6B6B;
  --success: #5BD6A0;

  /* ---- platform hues ----------------------------------------------- *
   * Not the platforms' own brand colors: those were chosen to stand out
   * on white and fight each other on black. All six clear 4.5:1 on
   * --panel, so each is legible as text and not only as a 2px edge.     */
  --p-instagram: #E0699B;
  --p-tiktok: #5BD6C8;
  --p-youtube: #F0764E;
  --p-spotify: #7FCB6A;
  --p-newsletter: #C79BF0;
  --p-website: #D9B45A;
  --p-other: #9A9AA6;

  /* ---- member colors ----------------------------------------------- *
   * A person is not a channel. Members read as muted tones against the
   * saturated platform hues, and never blue -- blue belongs to controls.
   * Initials are set in --on-member (dark on a light disc), the same
   * pattern --on-accent already uses, because light initials on a muted
   * disc measure 2.7-3.5:1 and fail.                                    */
  --m-1: #C08E9A;
  --m-2: #94AC8A;
  --m-3: #C2A081;
  --m-4: #96B4AD;
  --m-5: #A895B8;
  --m-6: #B5A778;
  --on-member: #0B0B10;

  /* ---- type -------------------------------------------------------- */
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --t-view: 1.35rem;
  --t-label: 0.7rem;
  --t-card: 0.8125rem;
  --t-meta: 0.6875rem;
  --t-day: 0.75rem;
  --t-body: 0.875rem;

  /* ---- space ------------------------------------------------------- *
   * A 4px base. Named by role rather than by size so a rhythm change is
   * one edit here and not a search across every stylesheet.             */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --radius: 6px;
  --radius-lg: 10px;

  /* Shadows always carry offset and blur — no zero-offset halos. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, .45);
  --shadow-drag: 0 10px 28px rgba(0, 0, 0, .55);

  /* ---- shell ------------------------------------------------------- */
  --rail-w: 216px;
  --rail-w-collapsed: 56px;
  --header-h: 56px;
  --panel-w: 348px;  /* a form, not Linkophony's phone preview */

  --cell-min-h: 124px;
  --card-h: 28px;

  /* ---- motion ------------------------------------------------------ */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t-base: 160ms;
}

/* Nothing depends on animation to become visible: a failed script must never
 * leave an empty grid. This only removes movement. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}