/* apps/static/assets/css/reffi-overrides.css */

   /* Variables CSS para fácil uso */
   :root {
    --reffi-primary: #673399;
    --reffi-accent: #FF3B5C;
    --reffi-warning: #FFA726;
    --reffi-black: #000000;

    --reffi-secondary-1: #E6CFFF;
    --reffi-secondary-2: #C7D2FF;
    --reffi-secondary-3: #6E6E6E;
    --reffi-secondary-4: #1BA8FF;

    --bs-primary: var(--reffi-primary);
    --bs-primary-active: var(--reffi-accent);

    --bs-dark-light: var(--reffi-secondary-1);

    --bs-menu-link-color-hover: var(--reffi-primary);
    --bs-menu-link-color-show: var(--reffi-primary);
    --bs-menu-link-color-here: var(--reffi-primary);
    --bs-menu-link-color-active: var(--reffi-primary);

    --bs-component-active-bg: var(--reffi-primary);

    --bs-component-active-color: #FFFFFF;
    --bs-component-active-bg: var(--reffi-primary);
    --bs-component-hover-color: var(--reffi-primary);
    --bs-component-hover-bg: #F9F9F9;
    --bs-component-checked-color: var(--reffi-secondary-1);
    --bs-component-checked-bg: var(--reffi-primary);
  }

  /* Sobrescribe los colores principales de Bootstrap/Craft */
  .btn-primary, .bg-primary {
    background-color: var(--reffi-primary) !important;
    border-color: var(--reffi-primary) !important;
  }

  .text-primary {
    color: var(--reffi-primary) !important;
  }

  .btn-danger, .bg-danger {
    background-color: var(--reffi-accent) !important;
    border-color: var(--reffi-accent) !important;
  }

  .text-danger {
    color: var(--reffi-accent) !important;
  }

  .btn-warning, .bg-warning {
    background-color: var(--reffi-warning) !important;
    border-color: var(--reffi-warning) !important;
  }

  .text-warning {
    color: var(--reffi-warning) !important;
  }

  .btn-dark, .bg-dark {
    background-color: var(--reffi-black) !important;
    border-color: var(--reffi-black) !important;
  }

  .text-dark {
    color: var(--reffi-black) !important;
  }

  /* Secundarios */
  .bg-secondary-1 { background-color: var(--reffi-secondary-1) !important; }
  .bg-secondary-2 { background-color: var(--reffi-secondary-2) !important; }
  .bg-secondary-3 { background-color: var(--reffi-secondary-3) !important; }
  .bg-secondary-4 { background-color: var(--reffi-secondary-4) !important; }

  .text-secondary-1 { color: var(--reffi-secondary-1) !important; }
  .text-secondary-2 { color: var(--reffi-secondary-2) !important; }
  .text-secondary-3 { color: var(--reffi-secondary-3) !important; }
  .text-secondary-4 { color: var(--reffi-secondary-4) !important; }

  /* Gradiente de marca (opcional) */
  .reffi-gradient {
    background: linear-gradient(90deg, #FF3B5C 0%, #FFA726 50%, #673399 100%);
    color: #fff;
  }

  /* Ejemplo de iconografía de marca */
  .icon-reefi-red    { background: #FF3B5C; color: #fff; border-radius: 50%; }
  .icon-reefi-yellow { background: #FFA726; color: #000; border-radius: 50%; }
  .icon-reefi-green  { background: #4CD964; color: #fff; border-radius: 50%; }

  /* Tipografía personalizada (si tienes la fuente Arboria) */
  @font-face {
    font-family: 'Arboria';
    src: url('/static/assets/fonts/arboria.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

  body, h1, h2, h3, h4, h5, h6, .arboria {
    font-family: 'Arboria', 'Inter', Arial, sans-serif;
  }