/* Design tokens. The single source for colour, type, spacing and depth.
   Matches the "Design system" board on the canvas. */
:root {
  /* Neutrals */
  --c-white: #ffffff;
  --c-champagne: #f6f1e9;
  --c-beige: #efe6d8;
  --c-nude: #dcc7b2;
  --c-line: #e4dacb;
  --c-line-strong: #d8cbb8;
  --c-sidebar: #fbf8f3;

  /* Dark neutrals */
  --c-charcoal: #2a282d;
  --c-grey: #5e5a57;
  --c-grey-soft: #8a847d;
  --c-black: #141316;
  --c-night: #232126;

  /* Metallics */
  --c-gold: #a8834b;      /* hairlines, icons, large text only (3.5:1) */
  --c-gold-text: #7e6135; /* gold used for small text (5.7:1 on white) */
  --c-gold-light: #cdb485;
  --c-silver: #b3b5b8;
  --c-silver-light: #d5d6d8;

  /* Purple accents */
  --c-plum: #5b3a6e;      /* primary action, active nav */
  --c-aubergine: #3a2547; /* hover */
  --c-mauve: #8a6d9e;
  --c-lilac: #e6ddee;

  /* Status (always paired with a word) */
  --c-success: #3d6b4c; --c-success-bg: #e1ece3; --c-success-text: #2c5238;
  --c-warn: #94651c;    --c-warn-bg: #f4e7cf;    --c-warn-text: #6e4a12;
  --c-danger: #9a3a3a;  --c-danger-bg: #f2dede;  --c-danger-text: #7a2c2c;

  /* Semantic roles */
  --bg: var(--c-champagne);
  --surface: var(--c-white);
  --surface-2: var(--c-beige);
  --text: var(--c-charcoal);
  --text-2: var(--c-grey);
  --text-display: var(--c-black);
  --border: var(--c-line);
  --accent: var(--c-plum);
  --accent-hover: var(--c-aubergine);
  --accent-soft: var(--c-lilac);
  --focus: var(--c-gold);

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: 48px; --lh-display: 56px;
  --fs-h1: 36px; --lh-h1: 44px;
  --fs-h2: 26px; --lh-h2: 32px;
  --fs-title: 17px;
  --fs-body: 15px; --lh-body: 24px;
  --fs-small: 13px;
  --fs-overline: 11px;

  /* Space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Radius */
  --r-input: 8px; --r-button: 10px; --r-card: 14px; --r-sheet: 20px; --r-pill: 999px;

  /* Depth */
  --e1: 0 1px 3px rgba(42, 40, 45, 0.1);
  --e2: 0 12px 32px rgba(42, 40, 45, 0.16);

  /* Motion */
  --t-fast: 160ms ease-out;

  /* Layout */
  --sidebar-w: 248px;
  --rail-w: 72px;
  --topbar-h: 72px;
  --bottomnav-h: 68px;
  --drawer-w: 440px;
  --tap: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; }
}