/* PaperAudio design tokens: the single source of truth for colour, type, space and shape.
   Change fonts here only. See docs/brand.md. */
:root {
  /* Palette */
  --pa-lavender: #C9B8FF;
  --pa-mist-blue: #B8D6FF;
  --pa-peach: #FFD6C2;
  --pa-pink: #E8B5E3;
  --pa-soft-stone: #F3F0F8;
  --pa-charcoal: #1F2937;
  --pa-warm-white: #FAF9F6;
  --pa-violet: #5B3FC4;         /* links, focus, small accent text (AA on warm white) */
  --pa-slate: #4B5563;          /* secondary text */
  --pa-lavender-deep: #A58BFF;
  --pa-sky-deep: #6FB8FF;
  /* Screening states (fills with AA ink). Added for the app prototype, Oct 2026. */
  --pa-mint: #BFE8D6;  --pa-mint-ink: #1F6B4F;   /* clear */
  --pa-amber: #FFE2A8; --pa-amber-ink: #7A4B00;  /* review */
  --pa-rose: #FFC9CF;  --pa-rose-ink: #8A1F33;   /* blocked */

  /* Host characters (light, deep): one hue each, round the colour wheel. Use as linear-gradient(135deg, var(--pa-host-coral)). */
  --pa-host-coral: #FFD0C7, #F2867A;   --pa-host-apricot: #FFDDC2, #FFA46B;
  --pa-host-butter: #FFF0B5, #F2C744;  --pa-host-lime: #DDF2C2, #8FCB5E;
  --pa-host-mint: #C6EEDF, #4FBF98;    --pa-host-teal: #C6E9F2, #4FB0CC;
  --pa-host-sky: #CFE0FF, #6F9BFF;     --pa-host-iris: #DAD2FF, #8C78F0;
  --pa-host-orchid: #EBCFFA, #BD7FE6;  --pa-host-pink: #FAD0E6, #E57DB3;
  /* Translucent layers */
  --pa-glass-faint: rgba(255, 255, 255, 0.55);
  --pa-glass: rgba(255, 255, 255, 0.76);
  --pa-glass-strong: rgba(255, 255, 255, 0.88);
  --pa-track: rgba(31, 41, 55, 0.14);
  --pa-on-dark-muted: rgba(250, 249, 246, 0.72);

  /* Semantic */
  --pa-bg: var(--pa-warm-white);
  --pa-surface: var(--pa-soft-stone);
  --pa-text: var(--pa-charcoal);
  --pa-text-muted: var(--pa-slate);
  --pa-link: var(--pa-violet);
  --pa-focus: var(--pa-violet);
  --pa-border: #E6E1EF;
  --pa-primary: var(--pa-lavender);
  --pa-on-primary: var(--pa-charcoal);

  /* Gradients (hero and artwork only) */
  --pa-grad-lavender-blue: linear-gradient(90deg, #C9B8FF, #B8D6FF);
  --pa-grad-blue-peach: linear-gradient(90deg, #B8D6FF, #FFD6C2);
  --pa-grad-purple-peach: linear-gradient(90deg, #A58BFF, #FFD6C2);
  --pa-grad-lavender-pink: linear-gradient(90deg, #C9B8FF, #E8B5E3);

  /* Type */
  --pa-font-display: "Comfortaa", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --pa-font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --pa-text-hero: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
  --pa-text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --pa-text-h3: 1.375rem;
  --pa-text-body: 1.0625rem;
  --pa-text-small: 0.875rem;
  --pa-text-caption: 0.75rem;
  --pa-leading-tight: 1.2;
  --pa-leading-body: 1.6;

  /* Space (4px scale) */
  --pa-space-1: 0.25rem;
  --pa-space-2: 0.5rem;
  --pa-space-3: 0.75rem;
  --pa-space-4: 1rem;
  --pa-space-6: 1.5rem;
  --pa-space-8: 2rem;
  --pa-space-12: 3rem;
  --pa-space-16: 4rem;

  /* Shape */
  --pa-radius-sm: 8px;
  --pa-radius-card: 16px;
  --pa-radius-pill: 999px;
  --pa-shadow-soft: 0 1px 2px rgba(31, 41, 55, 0.04), 0 8px 24px rgba(91, 63, 196, 0.08);

  /* Line icons: one size scale, two stroke weights (tokens.ts › icon) */
  --pa-icon-xs: 14px;
  --pa-icon-sm: 16px;
  --pa-icon-md: 20px;
  --pa-icon-lg: 24px;
  --pa-icon-xl: 28px;
  --pa-icon-stroke: 2;
  --pa-icon-stroke-strong: 2.5;
}

/* v2 (design loop, 18 Oct): mirrors tokens.ts › v2 and darkTheme. Additive. */
:root {
  --pa-v2-radius-card: 24px;
  --pa-v2-radius-hero: 32px;
  --pa-v2-text-display: 40px;
  --pa-v2-text-quote: 18px;
  --pa-v2-tap-car: 80px;
  --pa-v2-space-card: 16px;
  --pa-v2-space-section: 32px;
  --pa-v2-motion-slow: 420ms;
}
[data-theme="dark"] {
  --pa-bg: #14121C;
  --pa-surface: #1E1B29;
  --pa-surface-raised: #272336;
  --pa-text: #F4F1FA;
  --pa-text-muted: #B9B3C9;
  --pa-link: #C9B8FF;
  --pa-border: #353047;
}