/* props.css - School Color Variables */
/* Blue and Yellow Theme */

:root {
    /* Primary School Colors - Blue & Yellow */
    --school-primary: #0a4a8f;       /* Deep blue - main brand */
    --school-primary-light: #2a6fb0;  /* Lighter blue */
    --school-primary-dark: #003366;   /* Dark navy blue */
    
    --school-secondary: #f5c542;      /* Bright yellow - accent */
    --school-secondary-light: #ffd966; /* Lighter yellow */
    --school-secondary-dark: #d4a017;  /* Darker golden yellow */
    
    --school-gray-100: #f8f9fa;
    --school-gray-200: #e9ecef;
    --school-gray-300: #dee2e6;
    --school-gray-400: #ced4da;
    --school-gray-500: #adb5bd;
    --school-gray-600: #6c757d;
    --school-gray-700: #495057;
    --school-gray-800: #343a40;
    --school-gray-900: #212529;
    
    /* Semantic Colors (optional) */
    --school-success: #28a745;
    --school-warning: #ffc107;
    --school-danger: #dc3545;
    --school-info: #17a2b8;
    
    /* Background & Text Defaults */
    --school-bg: #ffffff;
    --school-text-dark: #212529;
    --school-text-light: #ffffff;

    --hero-gradient: linear-gradient(135deg, #c8e6c9, #e6ee9c, #fff9c4);


    --hero-padding: 6rem 0;
    --hero-min-height: 90vh;

    --hero-overlay: rgba(0, 0, 0, 0.25);

    --hero-gradient:
        linear-gradient(
            135deg,
            var(--school-primary-light),
            var(--school-secondary-light),
            var(--school-primary-dark)
        );

    --accent-color: var(--school-primary);
    --accent-rgb: 10, 74, 143;

    --shape1-bg: var(--school-secondary);
    --shape2-bg: var(--school-primary-dark);
    --shape3-bg: var(--school-primary-light);
  }
  
  /* Dark mode support (optional) */
  @media (prefers-color-scheme: dark) {
    :root {
      --school-bg: #121212;
      --school-text-dark: #f8f9fa;
      --school-gray-100: #2c2c2c;
      --school-gray-200: #3a3a3a;
    }
  }