/* icils.css
 * ICILS 2023 brand palette + global brand primitives.
 *
 * What lives here:
 *   - Design tokens (`:root` custom properties)
 *   - Body / typography baseline
 *   - Brand button + tag styles
 *   - Canonical .focus-tooltip
 *   - Used `.bg-*` utility classes
 *
 * What does NOT live here:
 *   - Tabulator chrome  -> tableStyles.css
 *   - Accessibility primitives, focus rings, prefers-* queries, print  -> accessibility.css
 *   - Country-search dropdown  -> countryFilter.css
 *   - Fullscreen toggle / container  -> fullscreen.css
 */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Primary brand */
    --iea-icils-yellow: #F9D342;
    --iea-icils-yellow-2: #FEE893;
    --iea-icils-yellow-border: #E0C030;

    /* Secondary brand */
    --iea-icils-dark-gray: #292826;
    --iea-icils-teal: #14A2B3;
    --iea-icils-orange: #F9A42A;

    /* Neutral / supporting */
    --iea-study-gray-1: #5A5A5A;
    --iea-study-gray-2: #8D9196;
    --iea-study-gray-3: #F4F4F6;

    /* Tabulator semantics */
    --iea-tabulator-row-odd: #E6E6E7;   /* #5A5A5E @ 15% */
    --iea-tabulator-row-hover: #B8BCC1;
    --iea-tabulator-border: #333;

    /* Text */
    --iea-black: #191919;
    --iea-dark-gray: #55585A;
}

/* ============================================================
   BASE
   ============================================================ */
article.table {
       font-family: 'Lato', 'Segoe UI', Arial, sans-serif;
       color: var(--iea-black);
       /* background-color: var(--iea-study-gray-3); */
   
   
   /* ============================================================
      TYPOGRAPHY
      ============================================================ */
   .title,
   .subtitle,
   .large-text,
   h1, h2, h3,
   .bold-text,
   strong, b {
       color: var(--iea-icils-dark-gray);
   }
   
   .small-text,
   .caption,
   p, li, td, th {
       color: var(--iea-black);
   }
   
   /* ============================================================
      BRAND BUTTONS
      (canonical home — accessibility.css used to also redefine these)
      ============================================================ */
   .button.is-iea-primary,
   .btn.is-iea-primary {
       background-color: var(--iea-icils-yellow);
       color: var(--iea-icils-dark-gray);
       border-color: transparent;
       font-weight: 600;
       transition: all 0.2s ease;
   }
   
   .button.is-iea-primary:hover,
   .btn.is-iea-primary:hover {
       background-color: var(--iea-icils-yellow);
       color: var(--iea-icils-dark-gray);
       transform: translateY(-1px);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
   
   .button.is-iea-secondary,
   .btn.is-iea-secondary {
       background-color: var(--iea-icils-dark-gray);
       color: #fff;
       border-color: transparent;
       font-weight: 600;
       transition: all 0.2s ease;
   }
   
   .button.is-iea-secondary:hover,
   .btn.is-iea-secondary:hover {
       background-color: var(--iea-icils-dark-gray);
       color: #fff;
       transform: translateY(-1px);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
   
   /* ============================================================
      BRAND TAGS
      ============================================================ */
   .label.is-iea-tag,
   .badge.is-iea-tag,
   .tag.is-iea-tag {
       background-color: var(--iea-icils-dark-gray);
       color: #fff;
   }
   
   /* ============================================================
      FOCUS TOOLTIP
      (single canonical version — used by accessibility.js / tooltipFocus.js)
      ============================================================ */
   .focus-tooltip {
       position: absolute;
       background: var(--iea-icils-dark-gray);
       color: #fff;
       padding: 8px 12px;
       border-radius: 4px;
       font-size: 0.875rem;
       line-height: 1.4;
       max-width: 300px;
       word-wrap: break-word;
       z-index: 10000;
       pointer-events: none;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
   
   /* ============================================================
      BACKGROUND UTILITIES
      (only the variants actually referenced by pages / layout.html)
      ============================================================ */
   .bg-yellow { background-color: var(--iea-icils-yellow); }
   .bg-dark   { background-color: var(--iea-icils-dark-gray); color: #fff; }
   .bg-teal   { background-color: var(--iea-icils-teal); color: #fff; }
   .bg-orange { background-color: var(--iea-icils-orange); }
   .bg-gray3  { background-color: var(--iea-study-gray-3); }
}