/* ========================================
   ASTROVIA OS SKIN LAYER
   Surface treatments for OS identity
   Version: 3.0.0 - Calm OS Aesthetic
   ======================================== */

:root {
  /* ========================================
     OS BACKGROUND IDENTITY
     ======================================== */
  --os-bg-primary: #FAFBFF;
  --os-bg-app: #F5F7FA;
  
  /* ========================================
     SIDEBAR TOKENS - CALM NEUTRAL
     ======================================== */
  --sidebar-bg: #FAFBFC;
  --sidebar-border: var(--neutral-200);
  --sidebar-item-text: var(--neutral-600);
  --sidebar-item-icon: var(--neutral-500);
  --sidebar-item-hover-bg: var(--neutral-100);
  --sidebar-item-hover-text: var(--neutral-800);
  --sidebar-item-active-bg: rgba(31, 81, 246, 0.06);
  --sidebar-item-active-text: var(--blue-600);
  --sidebar-item-icon-active: var(--blue-500);
  --sidebar-section-text: var(--neutral-500);
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  
  /* ========================================
     HEADER TOKENS - MINIMAL
     ======================================== */
  --header-bg: var(--neutral-0);
  --header-border: var(--neutral-200);
  --header-height: 64px;
  
  /* ========================================
     CARD TOKENS - CALM SURFACES
     ======================================== */
  --card-bg: var(--neutral-0);
  --card-border: var(--neutral-200);
  --card-shadow: var(--shadow-1);
  --card-shadow-hover: var(--shadow-1-hover);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-6);
  
  /* ========================================
     PAGE LAYOUT TOKENS
     ======================================== */
  --page-max-width: 1400px;
  --page-padding-x: var(--space-8);
  --page-padding-y: var(--space-6);
  --section-gap: var(--space-6);
  
  /* ========================================
     TAB TOKENS - SEGMENTED CONTROL
     ======================================== */
  --tab-bg: var(--neutral-100);
  --tab-active-bg: var(--neutral-0);
  --tab-border: var(--neutral-200);
  --tab-text: var(--neutral-500);
  --tab-active-text: var(--neutral-900);
  --tab-radius: var(--radius-sm);
  --tab-height: 36px;
  
  /* ========================================
     INPUT TOKENS - CLEAN FORMS
     ======================================== */
  --input-bg: var(--neutral-50);
  --input-bg-focus: var(--neutral-0);
  --input-border: var(--neutral-200);
  --input-border-focus: var(--blue-500);
  --input-text: var(--neutral-900);
  --input-placeholder: var(--neutral-400);
  --input-radius: var(--radius-sm);
  --input-height: 40px;
  
  /* ========================================
     BUTTON TOKENS
     ======================================== */
  --btn-primary-bg: var(--blue-500);
  --btn-primary-bg-hover: var(--blue-600);
  --btn-primary-text: var(--neutral-0);
  --btn-secondary-bg: var(--neutral-0);
  --btn-secondary-bg-hover: var(--neutral-50);
  --btn-secondary-border: var(--neutral-200);
  --btn-secondary-text: var(--neutral-700);
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: var(--neutral-100);
  --btn-ghost-text: var(--neutral-600);
  --btn-radius: var(--radius-sm);
  --btn-height: 40px;
  --btn-height-sm: 32px;
  
  /* ========================================
     TABLE TOKENS
     ======================================== */
  --table-header-bg: var(--neutral-50);
  --table-header-text: var(--neutral-600);
  --table-row-border: var(--neutral-150);
  --table-row-hover: var(--neutral-50);
  --table-cell-padding: var(--space-3) var(--space-4);
  
  /* ========================================
     MODAL TOKENS
     ======================================== */
  --modal-bg: var(--neutral-0);
  --modal-overlay: rgba(0, 0, 0, 0.4);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-modal);
  --modal-header-border: var(--neutral-150);
  --modal-footer-bg: var(--neutral-50);
  
  /* ========================================
     BADGE/PILL TOKENS
     ======================================== */
  --pill-bg: var(--neutral-100);
  --pill-text: var(--neutral-600);
  --pill-radius: var(--radius-full);
  --pill-padding: var(--space-1) var(--space-3);
  
  /* ========================================
     STAT CARD TOKENS
     ======================================== */
  --stat-card-bg: var(--neutral-0);
  --stat-card-border: var(--neutral-200);
  --stat-value-color: var(--neutral-900);
  --stat-label-color: var(--neutral-500);
  
  /* ========================================
     EMPTY STATE TOKENS
     ======================================== */
  --empty-icon-bg: var(--neutral-100);
  --empty-icon-color: var(--neutral-400);
  --empty-title-color: var(--neutral-700);
  --empty-subtitle-color: var(--neutral-500);
}