/*! Verdant UI — Design Tokens v1.0
 *  https://icomb.place/design-system/verdant-tokens.css
 *
 *  Pure CSS custom properties. Import into any project:
 *    @import url('https://icomb.place/design-system/verdant-tokens.css');
 *
 *  Works with or without Tailwind. For Tailwind v4, also import
 *  verdant-tailwind.css which maps these to @theme variables.
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. COLOUR TOKENS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* ── Base backgrounds ── */
  --vui-bg:               #1a2332;
  --vui-bg-deep:          #151d28;
  --vui-sidebar:          #1e2a38;
  --vui-surface:          #222d3d;
  --vui-surface-alt:      #273446;
  --vui-surface-hover:    #273749;

  /* ── Glass ── */
  --vui-glass:            rgba(30, 42, 56, 0.55);
  --vui-glass-border:     rgba(255, 255, 255, 0.06);
  --vui-glass-blur:       16px;

  /* ── Borders ── */
  --vui-border:           rgba(255, 255, 255, 0.06);
  --vui-border-hover:     rgba(255, 255, 255, 0.13);

  /* ── Text hierarchy ──
     Use these in descending brightness:
       --vui-text       Primary content: table data, names, values, body text
       --vui-text-sub   Secondary: descriptions, metadata, labels, subheadings
       --vui-text-muted Tertiary: placeholder text, hints, inactive tabs, captions
       --vui-text-dim   Disabled only: greyed-out controls, inactive/disabled elements
     NEVER use --vui-text-dim for readable content. */
  --vui-text:             #e0e8f0;
  --vui-text-sub:         #c0ccda;
  --vui-text-muted:       #a0b0c0;
  --vui-text-dim:         #6b7d90;

  /* ── Accent (Emerald) ── */
  --vui-accent:           #4fc978;
  --vui-accent-hover:     #3dbd68;
  --vui-accent-dim:       rgba(79, 201, 120, 0.10);
  --vui-accent-border:    rgba(79, 201, 120, 0.25);
  --vui-accent-glow:      rgba(79, 201, 120, 0.15);
  --vui-accent-text:      #0a1520;

  /* ── Danger ── */
  --vui-danger:           #f87171;
  --vui-danger-dim:       rgba(248, 113, 113, 0.10);
  --vui-danger-border:    rgba(248, 113, 113, 0.25);

  /* ── Warning ── */
  --vui-warning:          #fbbf24;
  --vui-warning-dim:      rgba(251, 191, 36, 0.10);
  --vui-warning-border:   rgba(251, 191, 36, 0.25);

  /* ── Info ── */
  --vui-info:             #38bdf8;
  --vui-info-dim:         rgba(56, 189, 248, 0.10);
  --vui-info-border:      rgba(56, 189, 248, 0.25);

  /* ── Purple ── */
  --vui-purple:           #a78bfa;
  --vui-purple-dim:       rgba(167, 139, 250, 0.10);
  --vui-purple-border:    rgba(167, 139, 250, 0.25);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. TYPOGRAPHY TOKENS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --vui-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vui-font-mono:  'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Scale */
  --vui-text-xs:    0.6875rem;   /* 11px */
  --vui-text-sm:    0.8125rem;   /* 13px */
  --vui-text-base:  0.875rem;    /* 14px */
  --vui-text-lg:    1rem;        /* 16px */
  --vui-text-xl:    1.25rem;     /* 20px */
  --vui-text-2xl:   1.75rem;     /* 28px */

  /* Weights */
  --vui-font-normal:    400;
  --vui-font-medium:    500;
  --vui-font-semibold:  600;
  --vui-font-bold:      700;
  --vui-font-extrabold: 800;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. SPACING & RADIUS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --vui-space-xs:   0.25rem;  /* 4px  */
  --vui-space-sm:   0.5rem;   /* 8px  */
  --vui-space-md:   1rem;     /* 16px */
  --vui-space-lg:   1.5rem;   /* 24px */
  --vui-space-xl:   2rem;     /* 32px */
  --vui-space-2xl:  3rem;     /* 48px */

  --vui-radius-sm:  6px;
  --vui-radius-md:  10px;
  --vui-radius-lg:  14px;
  --vui-radius-xl:  20px;
  --vui-radius-full: 9999px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. SHADOWS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --vui-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.12);
  --vui-shadow-md:    0 4px 16px rgba(0, 0, 0, 0.15);
  --vui-shadow-lg:    0 8px 25px rgba(0, 0, 0, 0.20);
  --vui-shadow-xl:    0 12px 40px rgba(0, 0, 0, 0.30);
  --vui-shadow-2xl:   0 24px 80px rgba(0, 0, 0, 0.40);
  --vui-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --vui-shadow-focus: 0 0 0 3px rgba(79, 201, 120, 0.08);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. ANIMATION TOKENS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --vui-ease-default:  ease;
  --vui-ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);
  --vui-duration-fast: 150ms;
  --vui-duration-base: 200ms;
  --vui-duration-slow: 300ms;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. ICON TOKENS (Lucide defaults)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --vui-icon-size:         15px;
  --vui-icon-stroke:       1.8;
  --vui-icon-size-sm:      13px;
  --vui-icon-stroke-sm:    2;
  --vui-icon-size-lg:      18px;
  --vui-icon-stroke-lg:    1.6;
}