@tailwind base;
@tailwind components;
@tailwind utilities;

/*
 * Custom Hatmada Color Definitions
 * These colors are used throughout the application
 */

@layer base {
  :root {
    --hatmada-primary: #172554;
    --hatmada-secondary: #75bfeb;
    --hatmada-accent: #e8541f;
    --hatmada-blue-1: #2987d6;
    --hatmada-blue-2: #3ba6f0;
    --hatmada-blue-3: #75bfeb;
    --hatmada-blue-4: #77cdf5;
    /* Legacy aliases for backwards compatibility */
    --hatmada-blue-light: #75bfeb;
    --hatmada-blue-medium: #2987d6;
    --hatmada-orange: #e8541f;

    /* 2026-05 redesign: sidebar width driven by a CSS variable so the
       layout (sidebar + main padding-left) can react to the collapsed
       state without sprinkling Tailwind variants everywhere. */
    --sidebar-width: 16rem;   /* matches w-64 */
  }

  html.sidebar-collapsed {
    --sidebar-width: 4.5rem;  /* matches roughly w-18, icon-only */
  }

  /* When the sidebar is collapsed, hide every element flagged with
     data-sidebar-label="true" (text labels, group headers, badges that
     don't make sense in icon-only mode). */
  html.sidebar-collapsed [data-sidebar-label="true"] {
    display: none !important;
  }

  /* Center the remaining icon-only links inside the collapsed sidebar. */
  html.sidebar-collapsed [data-sidebar-link="true"] {
    justify-content: center;
  }
  html.sidebar-collapsed [data-sidebar-link="true"] > svg {
    margin-right: 0;
  }

  /* Default body font — Plus Jakarta Sans from the 2026-05 redesign,
     with Raleway and the system stack as legacy / fallback. */
  html {
    font-family: 'Plus Jakarta Sans', 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', 'Aria Pro', 'Arimo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply py-2 px-4 text-white rounded transition-colors font-raleway;
    background-color: var(--hatmada-primary);
  }
  
  .btn-primary:hover {
    background-color: var(--hatmada-blue-1);
  }
  
  .btn-secondary {
    @apply py-2 px-4 text-white rounded transition-colors font-raleway;
    background-color: var(--hatmada-blue-1);
  }
  
  .btn-secondary:hover {
    background-color: var(--hatmada-primary);
  }
  
  .text-hatmada-primary {
    color: var(--hatmada-primary);
  }
  
  .text-hatmada-secondary {
    color: var(--hatmada-secondary);
  }
  
  .text-hatmada-accent {
    color: var(--hatmada-accent);
  }
  
  .bg-hatmada-primary {
    background-color: var(--hatmada-primary);
  }
  
  .bg-hatmada-secondary {
    background-color: var(--hatmada-secondary);
  }
  
  .bg-hatmada-accent {
    background-color: var(--hatmada-accent);
  }
  
  .bg-hatmada-blue-medium {
    background-color: var(--hatmada-blue-medium);
  }
  
  .bg-hatmada-blue-light {
    background-color: var(--hatmada-blue-light);
  }
  
  .bg-hatmada-orange {
    background-color: var(--hatmada-orange);
  }
  
  /* Classes utilitaires pour les polices */
  .font-raleway {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
  
  .font-aria-pro {
    font-family: 'Aria Pro', 'Arimo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
  
  .heading {
    @apply font-aria-pro;
  }
}

@layer utilities {
  .hover\:text-hatmada-primary:hover {
    color: var(--hatmada-primary);
  }
  
  .hover\:text-hatmada-secondary:hover {
    color: var(--hatmada-secondary);
  }
  
  .hover\:bg-hatmada-primary:hover {
    background-color: var(--hatmada-primary);
  }
  
  .hover\:bg-hatmada-blue-medium:hover {
    background-color: var(--hatmada-blue-medium);
  }
}