/* ═══════════════════════════════════════════════════════════════════
   DMpro Studio Edition v2.2 — Brand Tokens
   Single source of truth for both dashboard and extension.
   Identical file at:
     app/server/public/css/tokens-v11.css  (dashboard)
     app/client/css/tokens-v11.css         (extension)
   ═══════════════════════════════════════════════════════════════════ */

   :root {
    /* ── Core brand palette ── */
    --coral:        #FF5B47;
    --coral-deep:   #E84934;
    --coral-soft:   #FFD9CE;
    --coral-tint:   #FFEDE6;
    --honey:        #FFC940;
    --honey-deep:   #E5AC1F;
    --honey-soft:   #FFE9A8;
    --aura:         #B89BFF;
    --aura-soft:    #E0D4FF;
    --espresso:     #2A1A14;
    --espresso-2:   #5A4A42;
    --espresso-3:   #8A7A72;
    --espresso-4:   #C5B8B0;
    --cream:        #FAF3E7;
    --cream-warm:   #F5EAD8;
    --blush:        #FFD9CE;
    --pistachio:    #C8E5B5;
    --pistachio-soft:#E5F3D8;
    --line:         #EAE0D2;
  
    /* ── Legacy aliases (so existing CSS in dashboard.html keeps working) ── */
    --bg-warm:   #F5EAD8;
    --bg-cream:  #FAF3E7;
    --bg-card:   #ffffff;
    --bg-dark:   #FAF3E7;
    --ink:       #2A1A14;
    --ink-2:     #5A4A42;
    --ink-3:     #8A7A72;
    --ink-4:     #C5B8B0;
    --yellow:    #FFC940;
    --yellow-deep:#E5AC1F;
    --yellow-soft:#FFE9A8;
    --mint:      #C8E5B5;
    --mint-soft: #E5F3D8;
  
    /* Map old --primary/--primary-light/--primary-dark to new coral */
    --primary:       #FF5B47;
    --primary-light: #FF7A6B;
    --primary-dark:  #E84934;
    --secondary:     #B89BFF;
    --accent:        #FFC940;
  
    /* Text */
    --text:           #2A1A14;
    --text-primary:   #2A1A14;
    --text-secondary: #5A4A42;
    --text-muted:     #8A7A72;
  
    /* Borders */
    --border:        #EAE0D2;
    --border-strong: #C5B8B0;
  
    /* Status */
    --success: #4FAE5C;
    --danger:  #E84934;
    --warning: #E5AC1F;
    --info:    #B89BFF;
  
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(42,26,20,.06);
    --shadow-md: 0 4px 16px rgba(42,26,20,.08);
    --shadow-lg: 0 12px 40px rgba(42,26,20,.12);
    --shadow-xl: 0 24px 60px rgba(42,26,20,.18);
  
    /* Radii */
    --radius:       14px;
    --radius-sm:    8px;
    --radius-md:    14px;
    --radius-lg:    22px;
    --radius-pill:  999px;
    --radius-mark:  22%;
  
    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
  }
  
  /* ── Brand typography ── */
  body, html {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Headlines use Bricolage Grotesque — applied via .v11-heading or to common heading selectors */
  .v11-heading,
  .v11 h1, .v11 h2, .v11 h3, .v11 h4 {
    font-family: 'Bricolage Grotesque', 'DM Sans', -apple-system, sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    font-feature-settings: "ss01" on;
  }
  
  /* Editorial italic accent */
  .v11-editorial,
  em.serif {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
  }
  
  /* Mono accent */
  .v11-mono,
  code, pre, kbd, samp {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  }
  
  /* ── Brand pills/badges ── */
  .v11-pill-coral  { background: var(--coral-tint);     color: var(--coral-deep); }
  .v11-pill-honey  { background: var(--honey-soft);     color: var(--honey-deep); }
  .v11-pill-aura   { background: var(--aura-soft);      color: #6B4FB8; }
  .v11-pill-pista  { background: var(--pistachio-soft); color: #2E6B3A; }
  .v11-pill-cream  { background: var(--cream-warm);     color: var(--espresso); }
  
  /* ── Brand gradient (used in icons, hero, callouts) ── */
  .v11-grad-warm {
    background: linear-gradient(135deg, var(--coral), var(--honey));
  }
  .v11-grad-cool {
    background: linear-gradient(135deg, var(--aura), var(--coral));
  }
  
  /* ── "Coming soon" variable tooltip (per Risk #3) ── */
  .var-coming-soon {
    color: var(--espresso-4) !important;
    text-decoration: line-through;
    cursor: help;
    position: relative;
  }
  .var-coming-soon::after {
    content: "Coming soon";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--espresso);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 1000;
  }
  .var-coming-soon:hover::after { opacity: 1; }