/* ============================================
   DESIGN TOKENS — Support Pages
   Agentifiq.Web.MVC
   Used by: support/index.html, support/*.html
   Load AFTER tailwind.min.css, BEFORE support.css
   ============================================ */

:root {
    /* === HEADER GRADIENT (teal) === */
    --color-header-start: #0f766e;
    --color-header-end:   #14b8a6;
    --gradient-header: linear-gradient(135deg, var(--color-header-start), var(--color-header-end));

    /* === SEARCH === */
    --color-search-bg:          rgba(255, 255, 255, 0.15);
    --color-search-bg-focus:    rgba(255, 255, 255, 0.25);
    --color-search-border:      rgba(255, 255, 255, 0.3);
    --color-search-placeholder: rgba(255, 255, 255, 0.7);

    /* === CATEGORY CARDS === */
    --color-category-bg:       #ffffff;
    --color-category-border:   #e5e7eb;
    --color-category-hover-bg: rgba(20, 184, 166, 0.06);
    --color-category-icon:     var(--color-header-start);

    /* === CARD COLORS === */
    --color-card-bg:           #ffffff;
    --color-card-border:       #e5e7eb;
    --color-card-shadow:       rgba(0, 0, 0, 0.06);
    --color-card-shadow-hover: rgba(0, 0, 0, 0.12);

    /* === TEXT === */
    --color-fg-primary:   #111827;
    --color-fg-secondary: #4b5563;
    --color-fg-muted:     #6b7280;
    --color-fg-link:      var(--color-header-start);
    --color-fg-link-hover: #0d5e57;

    /* === BACKGROUND === */
    --color-bg-page:    #f9fafb;
    --color-bg-surface: #ffffff;

    /* === TYPOGRAPHY === */
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* === BORDERS === */
    --color-border: #e5e7eb;
}