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

:root {
    /* === HEADER GRADIENT (purple) === */
    --color-header-start: #7c3aed;
    --color-header-end:   #a855f7;
    --gradient-header: linear-gradient(135deg, var(--color-header-start), var(--color-header-end));

    /* === DIFFICULTY BADGE COLORS === */
    --color-badge-beginner-bg:      #d1fae5;
    --color-badge-beginner-text:    #065f46;
    --color-badge-intermediate-bg:  #fef3c7;
    --color-badge-intermediate-text:#92400e;
    --color-badge-advanced-bg:      #fee2e2;
    --color-badge-advanced-text:    #991b1b;

    /* === TOPIC BADGE === */
    --color-topic-bg:   rgba(124, 58, 237, 0.1);
    --color-topic-text: 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.14);
    --color-card-image-bg:     #f3f4f6;

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

    /* === PROGRESS / RATING === */
    --color-star-active:   #f59e0b;
    --color-star-inactive: #d1d5db;

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

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

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