/* ============================================================
   variables.css — Design Tokens
   invbox.io | All themes override these variables
   ============================================================ */

:root {

  /* ── Brand Colors ── */
  --color-primary:        #5b3df5;
  --color-primary-light:  #8b5cf6;
  --color-primary-dark:   #3a22c4;

  --color-secondary:      #1ea97c;
  --color-secondary-light:#6fdcb2;
  --color-secondary-dark: #157a58;

  --color-danger:         #d0442c;
  --color-danger-light:   #f09a88;
  --color-warning:        #ffb020;
  --color-info:           #0984e3;
  --color-success:        #1ea97c;

  /* ── Derived / alias tokens ── */
  --color-bg:             #f7f6f2;
  --color-bg-subtle:      #fbfaf7;
  --color-primary-soft:   rgba(91,61,245,.10);

  /* ── Neutral Palette ── */
  --color-ink:            #141726;
  --color-ink-secondary:  #4c5165;
  --color-ink-muted:      #6b7280;

  --color-surface:        #ffffff;
  --color-surface-alt:    #f7f6f2;
  --color-surface-hover:  #f5f2ff;

  --color-border:         #e5e2da;
  --color-border-focus:   #5b3df5;

  /* ── Typography ── */
  --font-primary:   'Assistant', 'Segoe UI', sans-serif;
  --font-display:   'Baloo 2', 'Assistant', sans-serif;
  --font-mono:      'Courier New', monospace;

  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   36px;

  --weight-regular: 400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --line-height-tight:  1.3;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* ── Spacing ── */
  --space-1:   4px;
  --space-1-5:   6px;
  --space-2:   8px;
  --space-2-5:   10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(20,23,38,.12);
  --shadow-md:  0 8px 22px rgba(20,23,38,.10);
  --shadow-lg:  0 20px 48px rgba(10,12,20,.28);
  --shadow-xl:  0 24px 56px rgba(10,12,20,.30);
  --shadow-brand-glow: 0 4px 16px rgba(91,61,245,.4);

  /* ── Layout ── */
  --sidebar-width:        240px;
  --sidebar-collapsed:    64px;
  --header-height:        56px;
  --content-max-width:    1280px;
  --mobile-breakpoint:    768px;

  /* ── Transitions ── */
  --transition-fast:   0.12s cubic-bezier(0.32,0.72,0,1);
  --transition-base:   0.22s cubic-bezier(0.32,0.72,0,1);
  --transition-normal: 0.22s cubic-bezier(0.32,0.72,0,1);
  --transition-slow:   0.4s cubic-bezier(0.32,0.72,0,1);

  /* ── Z-index layers ── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 500;
  --z-modal:   600;
  --z-toast:   700;
  --z-tooltip: 800;

  /* == V2 component tokens (p43a) == */
  --color-success-bg:     #e8f5ee;
  --color-success-fg:     #1c6349;
  --color-success-border: #bfe3d0;
  --color-warning-bg:     #fff4de;
  --color-warning-fg:     #7a5a12;
  --color-warning-border: #f0dcaf;
  --color-danger-bg:      #fdecea;
  --color-danger-fg:      #a32e1c;
  --color-danger-border:  #f2c9c2;
  --color-neutral-bg:     #f0f1f4;
  --color-neutral-border: #dee0e6;
  --color-accent-bg:      #efeaff;
  --color-accent-bg-2:    #f5f2ff;
  --color-accent-border:  #d6ccfa;
  --color-border-2:       #eeebe4;
  --color-border-3:       #f2f0ea;
  --color-border-control: #d8d4ca;
  --color-surface-3:      #f2f1ec;
  --color-text-invert:    #ffffff;
  --color-link:           var(--color-primary-dark);
  --color-link-hover:     #2a17a0;
  --color-chip-on-bg:     #141726;
  --color-chip-on-fg:     #ffffff;
  --color-overlay:        rgba(20,23,38,.46);
  --color-popover-bg:     #252842;
  --color-popover-border: rgba(255,255,255,.16);

  /* chrome scale - born part 51a */
  --color-header-surface:       rgba(255,255,255,.10);
  --color-header-surface-hover: rgba(255,255,255,.20);
  --color-header-border:        rgba(255,255,255,.15);
  --color-header-border-strong: rgba(255,255,255,.30);
  --color-header-fg:            rgba(255,255,255,.85);
  --color-header-fg-muted:      rgba(255,255,255,.65);
  --color-header-fg-subtle:     rgba(255,255,255,.45);

  --weight-black:         800;

  /* == V2 info trio (p43d) == */
  --color-info-bg:        #e8f4fd;
  --color-info-fg:        #1a6fa8;
  --color-info-border:    #bbdefb;
}