/* GENERATED FILE — DO NOT EDIT.
 * Source of truth: lib/ui/tokens.css
 * Regenerate with: npm run sync-studio
 */
/* VeLens — Design Tokens
 * ──────────────────────────────────────────────────────────────────
 * Single source of truth for color, spacing, typography, radius, and
 * shadow values across every UI surface.
 *
 * INJECTION
 *   Shadow DOM surfaces: this file's text is prepended to every other
 *   UI CSS file at injection time (see content/content.js loadCSS pipeline).
 *   Closed-mode Shadow roots can't inherit from the page, so the tokens
 *   must live inside each :host.
 *
 *   Popup (regular DOM): loaded via <link> in popup.html ahead of popup.css.
 *
 * AUTHORITATIVE
 *   Every UI surface uses var(--mc-*) by reference. The legacy --toolkit-*
 *   alias block was removed at the end of Phase 3 — all references have been
 *   migrated. New tokens belong here, not on individual surfaces.
 */

:host,
:root {
  /* ── Brand & semantic colors ── */
  --mc-primary:          #1a73e8;
  --mc-primary-hover:    #1557b0;
  --mc-primary-tint:     #e8f0fe;

  --mc-success:          #2e7d32;
  --mc-success-tint:     #e6f4ea;

  --mc-warn:             #f57f17;
  --mc-warn-tint:        #fff3c7;

  --mc-danger:           #d93025;
  --mc-danger-strong:    #b71c1c;
  --mc-danger-tint:      #fef2f2;

  /* ── Type-color rail (SFMC object types) ── */
  --mc-type-de:          #4A90D9;
  --mc-type-journey:     #34A853;
  --mc-type-automation:  #EA4335;
  --mc-type-list:        #9C27B0;
  --mc-type-cloudpage:   #00BCD4;
  --mc-type-content:     #FF7043;
  --mc-type-email:       #42A5F5;
  --mc-type-template:    #7E57C2;
  --mc-type-push:        #26A69A;
  --mc-type-sms:         #00838F;
  --mc-type-query:       #5C6BC0;
  --mc-type-data-filter: #8D6E63;
  --mc-type-classic:     #78909C;
  /* Automation Studio activities (script/import/file transfer/data extract/filter) */
  --mc-type-script:      #F4511E;
  --mc-type-import:      #6D4C41;
  --mc-type-filetransfer:#00897B;
  --mc-type-dataextract: #C0CA33;
  --mc-type-filter-act:  #5E35B1;

  /* ── Surfaces & borders ──
   * Collapses the 17 grays in the wild into a 3+3+1 system:
   *   surface 0/1/2/3 → page → sunken → hover → tinted
   *   border subtle/default/strong → divider → default → hover
   */
  --mc-surface:          #ffffff;
  --mc-surface-1:        #fafbfc;
  --mc-surface-2:        #f5f5f5;
  --mc-surface-3:        #e8eeff;

  --mc-border-subtle:    #f0f0f0;
  --mc-border:           #e0e0e0;
  --mc-border-strong:    #ccc;

  /* ── Text ──
   * Six steps because the wild ranges from #1a1a1a to #bbb in regular use.
   * Compressing further would shift visible contrast on neutral text.
   */
  --mc-text:             #1a1a1a;
  --mc-text-strong:      #333;
  --mc-text-secondary:   #555;
  --mc-text-tertiary:    #666;
  --mc-text-muted:       #888;
  --mc-text-subtle:      #999;
  --mc-text-disabled:    #bbb;
  --mc-text-on-primary:  #ffffff;

  /* ── Status badges (fg-on-tint pairs from the design system's badge card) ──
   * Use these for small status text on tinted chips/badges — the solid
   * semantic colors above don't have enough contrast on their own tints.
   */
  --mc-badge-ok-fg:      #1b7d3a;
  --mc-badge-ok-bg:      #e6f4ea;
  --mc-badge-warn-fg:    #8a6d00;
  --mc-badge-warn-bg:    #fef7e0;
  --mc-badge-err-fg:     #c5221f;
  --mc-badge-err-bg:     #fce8e6;
  --mc-badge-neutral-fg: #5f6368;
  --mc-badge-neutral-bg: #f1f3f4;
  --mc-badge-info-fg:    #1a56db;
  --mc-badge-info-bg:    #e8f0fe;
  --mc-badge-draft-fg:   #6b21a8;
  --mc-badge-draft-bg:   #f3e8fd;

  /* ── Scrollbar ── */
  --mc-scrollbar-thumb:        #d0d0d0;
  --mc-scrollbar-thumb-hover:  #b0b0b0;

  /* ── Radius ── */
  --mc-radius-xs:        3px;
  --mc-radius-sm:        4px;
  --mc-radius-md:        6px;
  --mc-radius-lg:        8px;
  --mc-radius-xl:        12px;
  --mc-radius-modal:     16px;
  --mc-radius-pill:      999px;

  /* ── Spacing (4px base) ── */
  --mc-space-1:  4px;
  --mc-space-2:  8px;
  --mc-space-3:  12px;
  --mc-space-4:  16px;
  --mc-space-5:  20px;
  --mc-space-6:  24px;
  --mc-space-8:  32px;

  /* ── Type scale ── */
  --mc-text-2xs: 10px;
  --mc-text-xs:  11px;
  --mc-text-sm:  12px;
  --mc-text-md:  13px;
  --mc-text-lg:  14px;
  --mc-text-xl:  16px;
  --mc-text-2xl: 18px;
  --mc-text-3xl: 22px;

  /* ── Shadows (4 levels) ── */
  --mc-shadow-sm:    0 1px 2px rgba(0,0,0,0.06);
  --mc-shadow-md:    0 2px 12px rgba(0,0,0,0.12);
  --mc-shadow-card:  0 4px 16px rgba(0,0,0,0.12);
  --mc-shadow-modal: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);

  /* ── Motion ── */
  --mc-ease:       cubic-bezier(0.2, 0, 0, 1);
  --mc-duration:   0.15s;
  --mc-duration-md: 0.2s;
}