// ============================================================
// ActuateCMS — SCSS Design Tokens
// Version 1.0 · Developer handoff
// ------------------------------------------------------------
// Two ways to consume:
//   1. Use the Sass maps + $acms-css-vars mixin to emit the same
//      CSS custom properties as tokens.css (recommended — keeps
//      runtime theming via [data-theme]).
//   2. Reference the raw $acms-* Sass variables directly at
//      build time if you don't need runtime theme switching.
// ============================================================

// ── Type ─────────────────────────────────────────────────────
$acms-font-sans: ('DM Sans', system-ui, -apple-system, sans-serif);
$acms-font-mono: ('DM Mono', ui-monospace, 'SFMono-Regular', monospace);

// Type scale (name: (size, weight, letter-spacing))
$acms-type: (
  page: (21px, 700, -0.5px),
  card: (14px, 600, 0),
  body: (13px, 450, 0),
  sub: (12px, 500, 0),
  hint: (11.5px, 450, 0),
  label: (10px, 600, 0.8px),
);

// ── Dimensions ───────────────────────────────────────────────
$acms-sidebar-width: 224px;
$acms-sidebar-width-collapsed: 60px;
$acms-topbar-height: 56px;
$acms-radius: 10px; // cards
$acms-radius-control: 8px; // buttons, inputs
$acms-radius-small: 6px; // badges, tags
$acms-radius-pill: 99px; // toggles, progress

// ── Motion ───────────────────────────────────────────────────
$acms-motion-fast: 0.12s;
$acms-motion-base: 0.18s;
$acms-motion-layout: 0.22s;
$acms-ease-layout: cubic-bezier(0.4, 0, 0.2, 1);

// ── Accent options (Appearance setting) ──────────────────────
$acms-accents: (
  purple: #7c3aed,
  // default
  blue: #2563eb,
  teal: #0d9488,
  pink: #db2777,
  orange: #ea580c,
);

// ── Theme maps ───────────────────────────────────────────────
$acms-light: (
  bg: #f5f4fa,
  sb: #ffffff,
  card: #ffffff,
  bdr: #e8e6f2,
  txt: #1a1827,
  sub: #6b6878,
  muted: #b0adbe,
  acc: #7c3aed,
  acc-l: #ede9fe,
  acc-m: #c4b5fd,
  suc: #059669,
  suc-l: #ecfdf5,
  warn: #d97706,
  warn-l: #fffbeb,
  err: #dc2626,
  err-l: #fef2f2,
  info: #0891b2,
  info-l: #e0f7fa,
  ai1: #7c3aed,
  ai2: #c026d3,
  shd: (0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04)),
  shd2: (0 4px 16px rgba(0, 0, 0, 0.1)),
);

$acms-dark: (
  bg: #0d0c18,
  sb: #141222,
  card: #1c1a2e,
  bdr: #2c2a42,
  txt: #eae8f5,
  sub: #8e8ba8,
  muted: #504e68,
  acc: #9d71f0,
  acc-l: #231950,
  acc-m: #5e3eaa,
  suc: #10b981,
  suc-l: #022c22,
  warn: #fbbf24,
  warn-l: #1a1000,
  err: #f87171,
  err-l: #200808,
  info: #38bdf8,
  info-l: #0a2838,
  ai1: #7c3aed,
  ai2: #c026d3,
  shd: (0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2)),
  shd2: (0 4px 20px rgba(0, 0, 0, 0.45)),
);

// Emit a theme map as CSS custom properties (--name).
@mixin acms-css-vars($theme) {
  @each $name, $value in $theme {
    --#{$name}: #{$value};
  }
}
