/* ========================================
   CM-01: DESIGN TOKENS EXTENDED
   ========================================
   Complementa variables.css amb tokens que FALTEN.
   Importar DESPRES de variables.css a totes les pagines.
   ======================================== */

:root {
  /* ========================================
     Z-INDEX SCALE
     Escala sistematica — mai valors ad-hoc
     ======================================== */
  --z-base: 1;
  --z-sticky: 50;
  --z-sidebar: 100;
  --z-tabbar: 150;
  --z-header: 200;
  --z-dropdown: 300;
  --z-popover: 350;
  --z-overlay: 400;
  --z-modal: 500;
  --z-modal-dropdown: 550;
  --z-toast: 700;
  --z-push-banner: 650;

  /* ========================================
     BREAKPOINTS
     Referencia per @media queries
     NOTA: CSS custom properties NO funcionen dins @media queries,
     pero serveixen com a referencia documentada. Usar els valors
     directament als media queries i referenciar aqui per consistencia.
     - Mobile:      max-width: 480px
     - Mobile-lg:   max-width: 639px
     - Tablet:      max-width: 767px
     - Desktop:     min-width: 1024px
     - Wide:        min-width: 1280px
     ======================================== */

  /* ========================================
     FONT WEIGHTS
     ======================================== */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========================================
     FONT SIZES EXTENDED
     Complementa --font-size-xs..2xl de variables.css
     ======================================== */
  --font-size-xxs: 0.625rem;   /* 10px — sync badges, micro labels */

  /* ========================================
     SPACING ALIASES
     Maps --space-N per ús rapid (complementa --spacing-xs..2xl)
     ======================================== */
  --space-0: 0;
  --space-1: 4px;     /* = --spacing-xs */
  --space-2: 8px;     /* = --spacing-sm */
  --space-3: 12px;    /* = --spacing-md */
  --space-4: 16px;
  --space-5: 20px;    /* = --spacing-lg */
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;   /* = --spacing-2xl */

  /* ========================================
     RADIUS EXTENDED
     ======================================== */
  --radius-xs: 2px;           /* Scrollbars, thin elements */
  --radius-full: 9999px;      /* Pills, badges, avatars */

  /* ========================================
     SHADOWS EXTENDED
     ======================================== */
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-interactive: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1);

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 100ms ease;
  --transition-normal: 150ms ease;
  --transition-slow: 300ms ease;

  /* ========================================
     SEMANTIC BACKGROUND COLORS
     Per alerts, badges, status indicators
     ======================================== */
  --color-success-bg: rgba(16, 185, 129, 0.08);
  --color-danger-bg: rgba(239, 68, 68, 0.08);
  --color-warning-bg: rgba(245, 158, 11, 0.08);
  --color-info-bg: rgba(19, 117, 188, 0.08);

  /* ========================================
     CHANNEL / CALENDAR SEMANTIC COLORS
     ======================================== */
  --color-channel-general: #6366f1;
  --color-channel-coordinacio: #6366f1;
  --color-channel-professors: #f59e0b;
  --color-channel-claustro: #8b5cf6;
}

/* ========================================
   DARK MODE EXTENSIONS
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-interactive: 0 10px 40px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);

    --color-success-bg: rgba(48, 209, 88, 0.15);
    --color-danger-bg: rgba(255, 69, 58, 0.15);
    --color-warning-bg: rgba(255, 214, 10, 0.15);
    --color-info-bg: rgba(10, 132, 255, 0.15);
  }
}