/* Portal Module CSS Variables */
:root {
  /* Primary Colors */
  --primary-color: #ce1126;      /* Indonesian red */
  --secondary-color: #ffffff;    /* White */
  --accent-color: #fbbf24;       /* Gold color (Indonesian gold) */
  --navy-color: #1e3a8a;         /* Navy blue for headers */
  
  /* Text Colors */
  --text-primary: #1e293b;       /* Darker gray for better contrast */
  --text-secondary: #475569;     /* Darker gray for secondary text */
  --text-light: #f1f5f9;         /* Light text color */
  --text-dark: #0f172a;          /* Very dark text color */
  
  /* Status Colors */
  --success-color: #28a745;      /* Green for positive things */
  --warning-color: #ffc107;      /* Yellow for warnings */
  --danger-color: #dc3545;       /* Red for errors */
  --info-color: #17a2b8;         /* Blue for info */
  
  /* Background Colors */
  --card-bg: #ffffff;            /* Card background */
  --body-bg: #f8f9fa;            /* Body background */
  --sidebar-bg: #e9ecef;         /* Sidebar background */
  
  /* Border Colors */
  --border-color: #dee2e6;       /* Border color */
  --border-dark: #adb5bd;        /* Darker border */
  --border-light: #f1f3f5;       /* Lighter border */
  
  /* Spacing System */
  --spacing-xs: 0.25rem;         /* Extra small spacing */
  --spacing-sm: 0.5rem;          /* Small spacing */
  --spacing-md: 1rem;            /* Medium spacing */
  --spacing-lg: 1.5rem;          /* Large spacing */
  --spacing-xl: 2rem;            /* Extra large spacing */
  --spacing-xxl: 3rem;           /* XXL spacing */
  
  /* Border Radius */
  --border-radius-sm: 0.25rem;   /* Small border radius */
  --border-radius: 0.375rem;     /* Default border radius */
  --border-radius-md: 0.5rem;    /* Medium border radius */
  --border-radius-lg: 0.75rem;   /* Large border radius */
  --border-radius-xl: 1rem;      /* Extra large border radius */
  --border-radius-full: 50%;     /* Full border radius */
  
  /* Shadows */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-md: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --shadow-xl: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
  
  /* Focus Ring */
  --focus-ring-color: var(--accent-color);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  
  /* Typography */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;       /* Extra small font size */
  --font-size-sm: 0.875rem;      /* Small font size */
  --font-size-base: 1rem;        /* Base font size */
  --font-size-lg: 1.125rem;      /* Large font size */
  --font-size-xl: 1.25rem;       /* Extra large font size */
  --font-size-2xl: 1.5rem;       /* 2XL font size */
  --font-size-3xl: 1.875rem;     /* 3XL font size */
  --font-size-4xl: 2.25rem;      /* 4XL font size */
  --font-size-5xl: 3rem;         /* 5XL font size */
  
  --font-weight-normal: 400;     /* Normal font weight */
  --font-weight-medium: 500;     /* Medium font weight */
  --font-weight-semibold: 600;   /* Semibold font weight */
  --font-weight-bold: 700;       /* Bold font weight */
  
  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}