/* Painter's Loft (D-001) — bundled for static deploy.
 * Source: david/design_system/tokens-studio.css
 * Run apps/studio-express/scripts/sync-design-tokens.sh to refresh from source.
 */

:root {
  --color-linen: #F0EBE1;
  --color-linen-warm: #E8E0D2;
  --color-linen-deep: #D8CEBC;
  --color-charcoal: #232320;
  --color-charcoal-mid: #302F2B;
  --color-charcoal-lt: #504E48;
  --color-brick: #A83C28;
  --color-brick-lt: #C4542E;
  --color-ochre: #C8991E;
  --color-iron: #6E6B62;
  --color-iron-lt: #9B9790;
  --color-plaster: #D4CCBC;

  --bg-canvas: var(--color-charcoal-mid);
  --bg-chat: var(--color-linen);
  --bg-chat-header: var(--color-linen-warm);
  --bg-topbar: var(--color-charcoal-mid);
  --bg-user-bubble: var(--color-charcoal);
  --bg-rory-bubble: var(--color-linen-warm);
  --bg-upload-zone: rgba(255, 255, 255, 0.015);
  --color-accent: var(--color-brick);
  --color-accent-hover: var(--color-brick-lt);
  --color-accent-warm: var(--color-ochre);
  --text-primary: var(--color-charcoal);
  --text-secondary: var(--color-iron);
  --text-muted: var(--color-iron-lt);
  --text-on-dark: var(--color-linen);
  --text-on-dark-muted: var(--color-iron-lt);
  --border-light: rgba(110, 107, 98, 0.30);
  --border-strong: rgba(110, 107, 98, 0.55);
  --border-on-light: var(--color-linen-deep);
  --border-accent: #A83C28;
  --border-dashed-upload: 1.5px dashed rgba(110, 107, 98, 0.45);
  --border-dashed-upload-hover: 1.5px dashed #9B9790;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --font-body: 'Inter', system-ui, sans-serif;
  /* Product wordmark script — D-001 §16 (Encore). Sync from david/design_system/tokens-studio.css */
  --font-wordmark: 'Pinyon Script', cursive;
  --color-wordmark-gold: #D9B055;
  /* Gift message overlay — D-001 §17 (CTO-Studio-014). Distinct job from the
   * gold wordmark: pewter is reserved for customer-authored content
   * overlaid on the card, never the product/brand name. */
  --color-message-overlay-pewter: #A8B4BD;

  --text-brand: 19px;
  --text-heading-lg: 22px;
  --text-heading-md: 18px;
  --text-body-lg: 15px;
  --text-body: 14px;
  --text-body-sm: 13px;
  --text-label: 11px;
  --text-micro: 10px;
  --text-btn: 12px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-none: none;
  --shadow-popover: 0 4px 20px rgba(35, 35, 32, 0.25);

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  --studio-chat-pane-width: 380px;
  --studio-topbar-height: 52px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes flicker {
  0%, 60%, 100% { opacity: 0.3; transform: scaleX(1); }
  30% { opacity: 1; transform: scaleX(1.3); }
}