/* PosterMock AI — design tokens (Phase 1 of the UI redesign).
   Namespaced --pm-* so this can be linked from a page without colliding with
   that page's own :root — pages migrate onto these values at their own pace. */
:root {
  /* Colour */
  --pm-ground:       #FBFAF7;
  --pm-panel:        #ffffff;
  --pm-panel-tint:   #F8F5FF;
  --pm-panel-tint-2: #F3EFFF;
  --pm-ink:          #16151A;
  --pm-text:         #2C2A34;
  --pm-text-2:       #4A4854;
  --pm-muted:        #6A6874;

  --pm-violet:      #7A4DF0;
  --pm-violet-dark: #5B32C7;
  --pm-violet-tint: #EFE8FF;

  --pm-coral:      #FF6A45;
  --pm-coral-dark: #C6390F;
  --pm-coral-tint: #FFE9E2;

  --pm-teal:      #0FB39B;
  --pm-teal-dark: #0B7A6B;
  --pm-teal-tint: #DFF6F2;

  --pm-amber:      #F0A020;
  --pm-amber-dark: #8A5A10;
  --pm-amber-tint: #FFF1DC;

  /* Borders */
  --pm-bw-1:   1.5px;
  --pm-bw-2:   2px;
  --pm-bw-2-5: 2.5px;

  /* Shadows — hard offsets only, no blur */
  --pm-shadow-1: 2px 2px 0 #16151A;
  --pm-shadow-2: 4px 4px 0 #16151A;
  --pm-shadow-3: 6px 6px 0 #16151A;
  --pm-shadow-4: 8px 8px 0 #16151A;
  --pm-ring:     0 0 0 3px rgba(122,77,240,.18);

  /* Radius */
  --pm-r-chip:      8px;
  --pm-r-ctrl:      10px;
  --pm-r-ctrl-lg:   12px;
  --pm-r-card:      14px;
  --pm-r-card-lg:   16px;
  --pm-r-major:     20px;
  --pm-r-major-lg:  22px;
  --pm-r-feature:   26px;
  --pm-r-pill:      100px;

  /* Type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}