/* InsightRPG Design Tokens
   ========================
   Product-level overrides layered on top of lgp-tokens.css.
   Sets InsightRPG's accent colour and any product-specific tokens.
*/

:root {
  /* ── InsightRPG Accent (warm amber) ── */
  --accent: var(--accent-insightrpg);
  --accent-lighter: var(--accent-insightrpg-lighter);

  /* ── Legacy aliases for existing component references ── */
  --font-display: var(--font-editorial);
  --font-body: var(--font-clear);
  --font-ui: var(--font-clear);
  --font-mono: 'iA Writer Mono', 'Courier New', monospace;

  /* ── Surface aliases (bridge old token names to new) ── */
  --color-ink: var(--text-primary);
  --color-ink-light: var(--text-secondary);
  --color-paper: var(--surface-0);
  --color-paper-warm: var(--surface-1);
  --color-paper-alt: var(--surface-2);
  --color-muted: var(--text-tertiary);
  --color-border: var(--surface-2);
  --color-border-light: var(--surface-2);

  /* ── Accent mapped to old colour names ── */
  --color-primary: var(--accent);
  --color-primary-light: var(--accent-lighter);
  --color-primary-dark: #92400E;
  --color-primary-mid: rgba(180, 83, 9, 0.25);

  --color-secondary: var(--brand-teal);
  --color-secondary-light: var(--brand-teal-lighter);
  --color-secondary-mid: rgba(26, 58, 58, 0.3);
  --color-secondary-dark: #0F2D2D;

  --color-accent: var(--brand-amber);
  --color-accent-light: var(--brand-amber-lighter);
  --color-accent-dark: #8B6914;

  /* ── Feedback (from lgp-tokens semantic colours) ── */
  --color-success: var(--color-success, #166534);
  --color-warning: var(--color-warning, #92400E);
  --color-danger: var(--color-error, #991B1B);
  --color-info: var(--color-info, #1E40AF);
  --color-success-light: rgba(22, 101, 52, 0.08);
  --color-warning-light: rgba(146, 64, 14, 0.08);
  --color-danger-light: rgba(153, 27, 27, 0.08);
  --color-info-light: rgba(30, 64, 175, 0.08);

  /* ── Exercise Type Semantics ── */
  --color-cardio: #B45309;
  --color-strength: #92400E;
  --color-flexibility: #166534;
  --color-rest: #1E40AF;
  --color-mental: #78350F;

  /* ── Warm Neutral ── */
  --color-warm: var(--brand-amber);
  --color-warm-light: var(--brand-amber-lighter);

  /* ── Leading ── */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.65;
  --leading-loose: 1.8;

  /* ── Tracking ── */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ── Borders ── */
  --border-thin: 1px solid var(--surface-2);
  --border-medium: 2px solid var(--surface-2);
  --border-thick: 3px solid var(--text-primary);

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.06), 0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.08), 0 4px 6px rgba(28, 25, 23, 0.04);
  --shadow-xl: 0 20px 25px rgba(28, 25, 23, 0.10), 0 8px 10px rgba(28, 25, 23, 0.04);

  /* ── Layout ── */
  --content-width: 68ch;
  --wide-width: 90ch;
  --sidebar-width: 280px;
  --page-gutter: var(--space-6);
  --nav-height: 48px;
  --endorser-height: 36px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;

  /* ── Decorative type ── */
  --text-display-xl: clamp(6rem, 12vw, 12rem);

  /* ── Vertical rhythm ── */
  --rhythm-paragraph: var(--space-4);
  --rhythm-block: var(--space-8);
  --rhythm-subsection: var(--space-12);
  --rhythm-section: var(--space-16);
  --rhythm-part: var(--space-24);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --accent: var(--accent-insightrpg);
  --accent-lighter: var(--accent-insightrpg-lighter);

  --color-primary: var(--accent);
  --color-primary-light: var(--accent-lighter);
  --color-primary-dark: #F59E0B;
  --color-primary-mid: rgba(212, 120, 10, 0.25);

  --color-secondary: var(--brand-teal);
  --color-secondary-light: var(--brand-teal-lighter);
  --color-secondary-mid: rgba(58, 122, 122, 0.3);
  --color-secondary-dark: #6CB5B5;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.25), 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.30), 0 8px 10px rgba(0, 0, 0, 0.15);
}