/* Shared design tokens — loaded by the configurator (index.html) and the
   share-card page (worker/card-page.js). */
:root {
  /* Corner rounding for every element in the project (cards, buttons, pills,
     slider thumbs, swatches). One value everywhere. Change it here only. */
  --radius: 8px;

  /* Softer rounding for the friendly chrome (panel tabs). */
  --radius-lg: 12px;

  /* Full pill rounding (send button, slider tracks). */
  --radius-pill: 999px;

  /* Vertical nudge for the flower + share group on the studio screen.
     Negative lifts it up, positive pushes it down. Tune in the admin panel. */
  --canvas-shift: -44px;

  /* Size of the message text typed on the card (placeholder scales with it). */
  --note-size: 22px;

  /* How much of the message is shown on the card before it scrolls. */
  --note-max: 220px;

  /* Hard caps on the message so the card always looks good (unitless). */
  --note-max-lines: 4;
  --note-max-words: 35;

  /* Position of the caption divider line / note area up from the card bottom. */
  --note-line: 0px;

  /* Max width of the specimen card / flower plate. */
  --plate-size: 420px;

  /* Card vertical size: caps the flower area height (excludes the message).
     Lower to crop the bottom (stem) and shorten the card. */
  --bloom-height: 424px;

  /* Padding at the bottom of the card, below the message. */
  --plate-pad-bottom: 42px;

  /* Spacing between the studio elements (presets, card, share row). */
  --stage-gap: 22px;
}