/* Calgary Mandarin School — the one place brand values are defined.
 *
 * Loaded by BOTH surfaces:
 *   - the public site  — @import at the top of css/styles.css, which then
 *     aliases its own --color-* names onto these
 *   - the staff dashboard — dashboard/app/globals.css, where Tailwind's
 *     @theme maps its names onto these
 *
 * Before this file existed the two were hand-copied and had already drifted:
 * one vermillion was --color-vermillion on the site and --color-brand in the
 * dashboard; #e5e1da was --color-border in one and --color-line in the other.
 * Change a value here and both surfaces move together.
 *
 * Names are prefixed --cms- so they never collide with either surface's own
 * variables. Tailwind must declare --color-ink itself to generate its
 * utilities, so a shared token of that exact name would produce
 * --color-ink: var(--color-ink) — a self-reference CSS discards.
 *
 * DELIBERATELY NOT HERE: type scale, spacing, layout widths. The public site
 * is marketing and leans on large display type; the dashboard is a dense tool
 * whose smallest labels had to grow to stay readable. Each surface owns those,
 * so a change made for one cannot silently resize the other.
 */
:root {
  /* Brand & surface colours */
  --cms-ink: #1a2332;
  --cms-ink-light: #2d3a4f;
  --cms-paper: #faf8f5;
  --cms-paper-dark: #f0ebe3;
  --cms-vermillion: #c53d43;
  --cms-vermillion-dark: #a33038;
  --cms-gold: #b8860b;
  --cms-teal: #2d6a6a;
  --cms-stone: #6b7280;
  --cms-stone-light: #9ca3af;
  --cms-border: #e5e1da;
  --cms-border-dark: #d1ccc2;
  --cms-success: #2d6a4f;
  --cms-warning: #b8860b;
  --cms-error: #c53d43;

  /* Typefaces */
  --cms-font-display: 'Playfair Display','Noto Serif TC',Georgia,serif;
  --cms-font-body: 'Source Sans 3','Noto Sans TC',-apple-system,BlinkMacSystemFont,sans-serif;
  --cms-font-chinese: 'Noto Serif TC','PingFang TC','Microsoft JhengHei',serif;

  /* Corner radii */
  --cms-radius-sm: 4px;
  --cms-radius-md: 8px;
  --cms-radius-lg: 12px;
  --cms-radius-xl: 16px;
  --cms-radius-full: 9999px;

  /* Elevation */
  --cms-shadow-sm: 0 1px 2px rgba(26,35,50,0.04);
  --cms-shadow-md: 0 4px 6px -1px rgba(26,35,50,0.06),0 2px 4px -1px rgba(26,35,50,0.04);
  --cms-shadow-lg: 0 10px 15px -3px rgba(26,35,50,0.08),0 4px 6px -2px rgba(26,35,50,0.04);
  --cms-shadow-xl: 0 20px 25px -5px rgba(26,35,50,0.1),0 10px 10px -5px rgba(26,35,50,0.04);

  /* Motion */
  --cms-transition-fast: 150ms ease;
  --cms-transition-base: 250ms ease;
  --cms-transition-slow: 400ms ease;
  --cms-transition-slower: 600ms ease;
}