/* ============================================================
   MetaDesk — Design Tokens
   All CSS custom properties (variables). Import first.
   ============================================================ */

:root {
  /* === TYPOGRAPHY === */
  --font-display: 'DM Sans', sans-serif;       /* Headlines, nav, labels */
  --font-body:    'IBM Plex Sans', sans-serif;  /* Body, data, paragraphs */
  --font-mono:    'IBM Plex Mono', monospace;   /* Numbers, codes, IDs */

  /* === COLORS — Light Mode === */
  --color-bg:         #F7F6F3;   /* Warm off-white page background */
  --color-surface:    #FFFFFF;   /* Cards, panels */
  --color-surface-2:  #F0EEE9;   /* Nested surfaces, table alt rows */
  --color-border:     #E4E2DC;   /* Default borders */
  --color-border-strong: #C8C5BC; /* Emphasized borders */

  --color-text-primary:   #1A1916;  /* Body copy */
  --color-text-secondary: #6B6860;  /* Labels, captions */
  --color-text-tertiary:  #A09D97;  /* Placeholders, disabled */

  --color-accent:       #1B4FD8;    /* Primary blue — CTAs, links */
  --color-accent-light: #EEF2FF;    /* Accent background tint */
  --color-accent-text:  #1236A8;    /* Text on accent-light */

  --color-success:      #15803D;
  --color-success-bg:   #F0FDF4;
  --color-warning:      #B45309;
  --color-warning-bg:   #FFFBEB;
  --color-danger:       #B91C1C;
  --color-danger-bg:    #FEF2F2;

  /* === 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;

  /* === BORDER RADIUS === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* === SHADOWS — extremely subtle === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* === TRANSITIONS === */
  --transition: 150ms ease;

  /* === LAYOUT === */
  --sidebar-width:    220px;
  --topbar-height:    56px;
  --content-max-width: 1200px;
}