/* ================================================================
   HARP Design Tokens
   ================================================================
   Shared visual language for HARP apps, shells, and onboarding.
   Import via: <link rel="stylesheet" href="/design-tokens.css">

   This is the default HARP theme. Themes override these tokens
   via CSS custom properties pushed through the postMessage bus.
   ================================================================ */

:root {
  /* ---- Surfaces ---- */
  --surface-root: #f5f0e8;
  --surface-primary: #ede7db;
  --surface-secondary: #f0ebe2;
  --surface-elevated: #faf7f1;
  --surface-hover: #e8e1d3;
  --surface-active: #e2dcd0;
  --surface-button: #e5dfd2;

  /* ---- Borders ---- */
  --border-primary: #d5cdb8;
  --border-secondary: #e0d9c8;
  --border-muted: #c8bfa8;
  --border-width: 1px;
  --border-style: solid;

  /* ---- Text (8 levels, dark → ghost) ---- */
  --text-primary: #2c2a24;
  --text-secondary: #4a4639;
  --text-tertiary: #5e5848;
  --text-muted: #6e6858;
  --text-dim: #7e7868;
  --text-faint: #908a78;
  --text-subtle: #a8a290;
  --text-ghost: #c0baa8;

  /* ---- Accents ---- */
  --accent-primary: #5a7a5a;
  --accent-success: #6b8f5e;
  --accent-success-light: #8aab7a;
  --accent-success-mid: #7a9a6a;
  --accent-error: #b05a4a;
  --accent-error-deep: #9a4a3a;
  --accent-error-light: #c07060;
  --accent-warning: #b8963e;
  --accent-purple: #8a7a9a;
  --accent-orange: #c08050;

  /* Alpha variants */
  --accent-primary-hover: #5a7a5a20;
  --accent-primary-faint: #5a7a5a10;
  --accent-primary-bg: #5a7a5a25;
  --accent-primary-badge: #5a7a5a12;

  /* ---- Typography ---- */
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-body: 'Crimson Pro', serif;
  --font-heading: 'Crimson Pro', serif;
  --line-height-tight: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;
  --letter-spacing-tight: 0;
  --letter-spacing-normal: 0.2px;
  --letter-spacing-wide: 0.8px;
  --letter-spacing-caps: 1.5px;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-base: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 21px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --font-weight-black: 700;

  /* ---- Spacing ---- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 28px;
  --space-12: 36px;

  /* ---- Layout ---- */
  --sidebar-width: 180px;
  --inbox-list-width: 340px;
  --agents-panel-width: 280px;
  --history-sidebar-width: 140px;

  /* Border radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 10px;
  --radius-circle: 50%;

  /* Z-index layers */
  --z-base: 1;
  --z-sticky: 50;
  --z-sidebar: 100;
  --z-overlay: 9999;

  /* ---- Animation ---- */
  --transition-fast: 0.1s;
  --transition-base: 0.15s;
  --transition-slow: 0.2s;

  /* ---- Shadows ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(44,42,36,0.05);
  --shadow-md: 0 2px 6px rgba(44,42,36,0.08);
  --shadow-lg: 0 4px 12px rgba(44,42,36,0.12);
  --shadow-glow: 0 0 12px var(--accent-primary);

  /* ---- Effects ---- */
  --opacity-disabled: 0.4;
  --opacity-hover: 0.8;
  --opacity-ghost: 0.5;
  --blur-none: 0;
  --blur-sm: 4px;
  --blur-md: 8px;

  /* ---- Component tokens ---- */
  --card-radius: 4px;
  --card-shadow: 0 1px 3px rgba(44,42,36,0.06);
  --card-border: var(--border-width) var(--border-style) var(--border-primary);
  --button-radius: 3px;
  --input-radius: 3px;
  --badge-radius: var(--radius-pill);
  --panel-radius: 4px;

  /* ---- Channel colors (mapped to accents) ---- */
  --channel-message: var(--accent-primary);
  --channel-inbox: var(--accent-warning);
  --channel-purchase: var(--accent-success);
  --channel-request: var(--accent-purple);
  --channel-my-request: var(--accent-orange);
  --channel-receipt: var(--text-muted);
  --channel-sale: var(--accent-success-light);
}