/* RaffsSync Design Tokens
 * Path: /sync/assets/css/raffssync-design-tokens.css
 * Version: v1.0.0
 * Date: 2026-03-09
 *
 * Notes:
 * - Canonical design tokens for the entire RaffsSync platform.
 * - Applies to Admin, Dashboard, Partner, Developer, Public UI, and Atlas.
 * - Atlas should use the same core tokens with only a slight tonal shift via local overrides.
 * - This file defines platform-wide colour, spacing, radius, shadow, motion, typography,
 *   z-index, and layout tokens.
 * - Do not hardcode values in page-level CSS when a token exists here.
 */

:root{
  color-scheme: dark;

  /* ---------------------------------------------------------------------- */
  /* Brand identity                                                          */
  /* ---------------------------------------------------------------------- */
  --rs-brand-name: "RaffsSync";
  --rs-brand-accent: #c8a45b;
  --rs-brand-accent-hi: #dec07f;
  --rs-brand-accent-soft: #a88443;
  --rs-brand-accent-wash: rgba(200,164,91,.16);
  --rs-brand-accent-line: rgba(200,164,91,.24);

  /* ---------------------------------------------------------------------- */
  /* Core background system                                                  */
  /* ---------------------------------------------------------------------- */
  --rs-bg-0: #070b0f;
  --rs-bg-1: #0c1116;
  --rs-bg-2: #10161c;
  --rs-bg-3: #141b22;
  --rs-bg-4: #1a222b;

  --rs-surface-0: rgba(10,14,18,.96);
  --rs-surface-1: rgba(18,24,30,.92);
  --rs-surface-2: rgba(22,28,34,.86);
  --rs-surface-3: rgba(28,35,42,.82);
  --rs-surface-4: rgba(255,255,255,.035);
  --rs-surface-5: rgba(255,255,255,.055);

  /* ---------------------------------------------------------------------- */
  /* Text system                                                             */
  /* ---------------------------------------------------------------------- */
  --rs-text: rgba(255,255,255,.88);
  --rs-text-soft: rgba(255,255,255,.72);
  --rs-text-dim: rgba(255,255,255,.54);
  --rs-text-faint: rgba(255,255,255,.38);
  --rs-text-disabled: rgba(255,255,255,.24);
  --rs-text-on-accent: #1a1408;

  /* ---------------------------------------------------------------------- */
  /* Border + line system                                                    */
  /* ---------------------------------------------------------------------- */
  --rs-line: rgba(255,255,255,.06);
  --rs-line-soft: rgba(255,255,255,.04);
  --rs-line-strong: rgba(255,255,255,.10);
  --rs-line-accent: rgba(200,164,91,.22);
  --rs-line-accent-strong: rgba(200,164,91,.34);
  --rs-line-focus: rgba(222,192,127,.36);

  /* ---------------------------------------------------------------------- */
  /* Semantic colours                                                        */
  /* ---------------------------------------------------------------------- */
  --rs-ok: #43a063;
  --rs-ok-soft: rgba(67,160,99,.16);
  --rs-ok-line: rgba(67,160,99,.28);

  --rs-warn: #c7923f;
  --rs-warn-soft: rgba(199,146,63,.16);
  --rs-warn-line: rgba(199,146,63,.28);

  --rs-danger: #c85a5a;
  --rs-danger-soft: rgba(200,90,90,.16);
  --rs-danger-line: rgba(200,90,90,.28);

  --rs-info: #7d92a6;
  --rs-info-soft: rgba(125,146,166,.16);
  --rs-info-line: rgba(125,146,166,.28);

  /* ---------------------------------------------------------------------- */
  /* Atlas tonal companion tokens                                            */
  /* Use as light overrides in Atlas, not a different design language.       */
  /* ---------------------------------------------------------------------- */
  --rs-atlas-bg-0: #05080c;
  --rs-atlas-bg-1: #090d12;
  --rs-atlas-surface-1: rgba(16,21,26,.90);
  --rs-atlas-surface-2: rgba(20,26,32,.84);
  --rs-atlas-glow: rgba(200,164,91,.06);
  --rs-atlas-glow-strong: rgba(200,164,91,.10);

  /* ---------------------------------------------------------------------- */
  /* Typography                                                              */
  /* ---------------------------------------------------------------------- */
  --rs-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rs-fz-11: 11px;
  --rs-fz-12: 12px;
  --rs-fz-13: 13px;
  --rs-fz-14: 14px;
  --rs-fz-16: 16px;
  --rs-fz-18: 18px;
  --rs-fz-20: 20px;
  --rs-fz-24: 24px;
  --rs-fz-32: 32px;

  --rs-lh-tight: 1.15;
  --rs-lh-body: 1.45;
  --rs-lh-relaxed: 1.6;

  --rs-fw-regular: 400;
  --rs-fw-medium: 500;
  --rs-fw-semibold: 600;
  --rs-fw-bold: 700;
  --rs-fw-heavy: 800;

  --rs-track-tight: -.01em;
  --rs-track-normal: 0;
  --rs-track-wide: .08em;
  --rs-track-ui: .14em;
  --rs-track-command: .22em;

  /* ---------------------------------------------------------------------- */
  /* Radius system                                                           */
  /* ---------------------------------------------------------------------- */
  --rs-r-6: 6px;
  --rs-r-10: 10px;
  --rs-r-16: 16px;
  --rs-r-18: 18px;
  --rs-r-24: 24px;
  --rs-r-pill: 999px;

  --rs-radius-xs: var(--rs-r-6);
  --rs-radius-sm: var(--rs-r-10);
  --rs-radius-md: var(--rs-r-16);
  --rs-radius-lg: var(--rs-r-18);
  --rs-radius-xl: var(--rs-r-24);

  /* ---------------------------------------------------------------------- */
  /* Spacing system                                                          */
  /* ---------------------------------------------------------------------- */
  --rs-space-2: 2px;
  --rs-space-4: 4px;
  --rs-space-8: 8px;
  --rs-space-12: 12px;
  --rs-space-16: 16px;
  --rs-space-24: 24px;
  --rs-space-32: 32px;
  --rs-space-48: 48px;

  /* ---------------------------------------------------------------------- */
  /* Sizing tokens                                                           */
  /* ---------------------------------------------------------------------- */
  --rs-control-h-sm: 32px;
  --rs-control-h-md: 40px;
  --rs-control-h-lg: 44px;
  --rs-control-h-xl: 48px;

  --rs-icon-14: 14px;
  --rs-icon-16: 16px;
  --rs-icon-18: 18px;
  --rs-icon-20: 20px;
  --rs-icon-24: 24px;

  --rs-sidebar-w: 286px;
  --rs-sidebar-w-collapsed: 68px;
  --rs-content-max: 1280px;
  --rs-chat-max: 920px;
  --rs-chat-max-readable: 860px;

  /* ---------------------------------------------------------------------- */
  /* Shadows + depth                                                         */
  /* ---------------------------------------------------------------------- */
  --rs-shadow-xs: 0 2px 8px rgba(0,0,0,.14);
  --rs-shadow-sm: 0 8px 20px rgba(0,0,0,.18);
  --rs-shadow-md: 0 12px 30px rgba(0,0,0,.24);
  --rs-shadow-lg: 0 22px 56px rgba(0,0,0,.34);
  --rs-shadow-xl: 0 32px 72px rgba(0,0,0,.42);

  --rs-shadow-surface:
    0 10px 30px rgba(0,0,0,.22);
  --rs-shadow-surface-hi:
    0 18px 48px rgba(0,0,0,.30);
  --rs-shadow-accent:
    0 0 0 1px rgba(200,164,91,.04),
    0 0 40px rgba(200,164,91,.06);

  /* ---------------------------------------------------------------------- */
  /* Blur + material                                                         */
  /* ---------------------------------------------------------------------- */
  --rs-blur-sm: blur(6px);
  --rs-blur-md: blur(10px);
  --rs-blur-lg: blur(14px);

  --rs-material-bg:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
    rgba(18,24,30,.82);
  --rs-material-border: 1px solid rgba(255,255,255,.06);
  --rs-material-radius: var(--rs-radius-lg);
  --rs-material-shadow: var(--rs-shadow-surface);
  --rs-material-backdrop: blur(10px);

  /* ---------------------------------------------------------------------- */
  /* Motion                                                                  */
  /* ---------------------------------------------------------------------- */
  --rs-ease: ease;
  --rs-ease-out: ease-out;
  --rs-fast: 120ms ease-out;
  --rs-med: 160ms ease-out;
  --rs-slow: 180ms ease-out;
  --rs-panel: 180ms ease-out;
  --rs-fade: 140ms ease-out;

  /* ---------------------------------------------------------------------- */
  /* Focus + interaction                                                     */
  /* ---------------------------------------------------------------------- */
  --rs-focus-ring: 0 0 0 3px rgba(200,164,91,.14);
  --rs-focus-outline: 2px solid rgba(222,192,127,.34);
  --rs-hover-bg: rgba(255,255,255,.04);
  --rs-active-bg: rgba(255,255,255,.06);

  /* ---------------------------------------------------------------------- */
  /* Safe areas                                                              */
  /* ---------------------------------------------------------------------- */
  --rs-safe-top: env(safe-area-inset-top, 0px);
  --rs-safe-right: env(safe-area-inset-right, 0px);
  --rs-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rs-safe-left: env(safe-area-inset-left, 0px);

  /* ---------------------------------------------------------------------- */
  /* Z-index system                                                          */
  /* ---------------------------------------------------------------------- */
  --rs-z-base: 1;
  --rs-z-header: 30;
  --rs-z-sticky: 40;
  --rs-z-sidebar: 2001;
  --rs-z-overlay: 2000;
  --rs-z-menu: 99999;
  --rs-z-burger: 100001;
  --rs-z-toast: 110000;
  --rs-z-modal: 120000;
}

/* -------------------------------------------------------------------------- */
/* Recommended theme helpers                                                  */
/* -------------------------------------------------------------------------- */

html,
body{
  font-family: var(--rs-font-ui);
  color: var(--rs-text);
  background: var(--rs-bg-0);
}

.rs-theme-platform{
  --rs-app-bg:
    radial-gradient(circle at top left, rgba(200,164,91,.05), transparent 24%),
    linear-gradient(180deg, var(--rs-bg-0) 0%, var(--rs-bg-1) 42%, var(--rs-bg-0) 100%);
}

.rs-theme-atlas{
  --rs-app-bg:
    radial-gradient(circle at top left, rgba(200,164,91,.05), transparent 20%),
    radial-gradient(circle at top right, rgba(67,160,99,.04), transparent 18%),
    linear-gradient(180deg, var(--rs-atlas-bg-0) 0%, var(--rs-atlas-bg-1) 42%, var(--rs-atlas-bg-0) 100%);
}

/* -------------------------------------------------------------------------- */
/* Canonical utility material tokens                                          */
/* -------------------------------------------------------------------------- */

.rs-material{
  background: var(--rs-material-bg);
  border: var(--rs-material-border);
  border-radius: var(--rs-material-radius);
  box-shadow: var(--rs-material-shadow);
  backdrop-filter: var(--rs-material-backdrop);
  -webkit-backdrop-filter: var(--rs-material-backdrop);
}

.rs-text-dim{ color: var(--rs-text-dim); }
.rs-text-soft{ color: var(--rs-text-soft); }
.rs-text-faint{ color: var(--rs-text-faint); }

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

.rs-focus-ring:focus-visible{
  outline: none;
  box-shadow: var(--rs-focus-ring);
}

/* -------------------------------------------------------------------------- */
/* Guardrail notes                                                            */
/* -------------------------------------------------------------------------- */
/*
  1. Do not introduce page-level hardcoded colour values when a token exists.
  2. Atlas may override tone, but must not invent a separate design language.
  3. Use spacing, radius, motion, and typography tokens consistently.
  4. Use Raffs gold as the single primary accent across the platform.
  5. New UI modules should import this file before module-specific CSS.
*/