/* 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;
  /* Darkened from #6b7280 on 2026-09-07. It was 4.07:1 on the paper-dark
   * band — below the 4.5:1 a person with low vision needs, and this grey is
   * what most of the Chinese on the site is set in. Now 5.0:1 or better on
   * every ground the site uses, and still visibly a soft grey. */
  --cms-stone: #5b6472;
  --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: 14px;
  --cms-radius-xl: 20px;
  --cms-radius-2xl: 28px;
  --cms-radius-full: 9999px;

  /* Materials — surfaces that are not just a fill.
   *
   * The school teaches brush on paper, and the site had been using "paper" as
   * a flat colour: every card a white box with a hairline drawn round it. A
   * sheet of paper lying on a desk is not outlined, it is lifted — so a card
   * is now a warmer white than the ground, with no border and a shadow, and
   * the bar at the top is a translucent layer the page slides under.
   *
   * --cms-sheet is warmer than #fff on purpose: pure white on this cream reads
   * as a hole rather than as a second sheet. */
  --cms-sheet: #fffdfa;
  /* 0.72 was too thin, and the reason is specific: `backdrop-filter` has
   * nothing to filter once an element has been CAPTURED for a view transition
   * — the backdrop is not part of the snapshot. The header is therefore NOT
   * given a view-transition-name (see css/styles.css), which lets it keep its
   * frost through a navigation and lets this stay properly translucent: thin
   * enough that colour and movement show through the blur, opaque enough that
   * words never do. */
  --cms-glass: rgba(250,248,245,0.78);
  --cms-glass-line: rgba(26,35,50,0.07);
  /* The light behind the calligraphy in a hero. */
  --cms-bloom: rgba(197,61,67,0.07);

  /* Elevation
   *
   * Tinted with the ink rather than neutral grey — a grey shadow on a warm
   * cream ground goes muddy, and it is the tell that gives away a card kit.
   * Two layers each: a tight contact shadow where the sheet meets the paper,
   * and a wide soft one for the distance above it. */
  --cms-shadow-sm: 0 1px 2px rgba(26,35,50,0.05),0 1px 3px rgba(26,35,50,0.03);
  --cms-shadow-md: 0 2px 4px rgba(26,35,50,0.05),0 8px 20px -6px rgba(26,35,50,0.09);
  --cms-shadow-lg: 0 3px 6px rgba(26,35,50,0.05),0 18px 40px -12px rgba(26,35,50,0.13);
  --cms-shadow-xl: 0 4px 8px rgba(26,35,50,0.05),0 32px 64px -20px rgba(26,35,50,0.18);

  /* Motion */
  --cms-transition-fast: 150ms ease;
  --cms-transition-base: 250ms ease;
  --cms-transition-slow: 400ms ease;
  --cms-transition-slower: 600ms ease;
  --cms-spring: 380ms cubic-bezier(0.22,1,0.36,1);
}