/* design-tokens.css — single source of truth for shared visual vocabulary.
   Values equal the hard-coded colors/fonts/radii already used across the
   index page (style.css) and the notation editor panels, so adopting a token
   is a no-op visually. New UI must reference these vars instead of raw hex. */

:root {
  /* Colors */
  --sn-color-primary: #6e0f13;        /* maroon — buttons, headings, highlights */
  --sn-color-primary-dark: #580a06;   /* maroon pressed/hover */
  --sn-color-primary-header: #710f13; /* popup titles, keyboard highlights */
  --sn-color-accent: #9a8035;         /* gold — footer links, accents */
  --sn-color-surface: #fffdf5;        /* parchment card ground */
  --sn-color-surface-canvas: floralwhite; /* editor edit canvas */
  --sn-color-surface-alt: #ebebeb;    /* gray section ground */
  --sn-color-surface-timeline: #81704c; /* timeline surfaces */
  --sn-color-text-body: #827C76;      /* muted body text */
  --sn-color-text-heading: #2A1F15;   /* warm dark heading text */
  --sn-color-error: #c62828;

  /* Typography */
  --sn-font-heading: 'Merriweather', serif;   /* weight 900 headings */
  --sn-font-body: 'Montserrat', sans-serif;   /* weight 400-600 body */

  /* Shape */
  --sn-radius-pill: 100px;    /* buttons, inputs, nav links */
  --sn-radius-card: 5px;      /* cards, popups */
  --sn-radius-panel: 12px;    /* large panels, pricing columns */

  /* Separators */
  --sn-border-dotted: 1px dotted #e0d8c0;

  /* Elevation */
  --sn-shadow-card: 0 10px 50px rgba(0, 0, 0, 0.1);
  --sn-shadow-popup: 0 5px 20px rgba(100, 96, 86, 0.4);
}