@charset "UTF-8";

/* ==========================================================================
   CSI Tecnopreven - CSS Custom Properties (Design Tokens)
   Inherited from Tecnoweb design system with teal color scheme.
   ========================================================================== */

:root {
    /* -----------------------------------------------------------------------
       COLORS - Primary (Teal)
       ----------------------------------------------------------------------- */
    --c-primary-000: #f9fcfc;
    --c-primary-050: #e8f4f6;
    --c-primary-100: #c5dfe4;
    --c-primary-200: #94c4cd;
    --c-primary-300: #5ea6b3;
    --c-primary-400: #166475;
    --c-primary-500: #0f5462;
    --c-primary-600: #09414d;

    /* -----------------------------------------------------------------------
       COLORS - Accent (Gold)
       ----------------------------------------------------------------------- */
    --c-accent-300: #e8bc5f;
    --c-accent-400: #E0A735;
    --c-accent-500: #c89420;

    /* -----------------------------------------------------------------------
       COLORS - Semantic
       ----------------------------------------------------------------------- */
    --c-success:     #0bb045;
    --c-success-100: #e6f7eb;
    --c-success-500: #00822d;

    --c-warning:     #f4a443;
    --c-warning-100: #fef4e6;
    --c-warning-500: #d07b14;
    /* W7-bis2 P0-02 — darker warning for AA on light bg (≥4.5:1 over --c-warning-100) */
    --c-warning-700: #6e3f0a;

    /* W7-bis Vera F3-P1-01 — alias for components using --c-border (kpi cards, etc.) */
    --c-border: var(--c-border-light, #e5e7eb);
    /* W7-bis Vera F3-P1-03 — accent-100 token (was #fdf5e6 hardcoded in badge--accent) */
    --c-accent-100: #fdf5e6;

    /* W7-bis Vera iter4 F4-P1-03 — code blocks (KB articles) */
    --c-code-bg: #1e293b;
    --c-code-text: #e2e8f0;

    /* W7-bis Vera iter5 F4-P1-02 — internal note background (was #fef9f0 hardcoded) */
    --c-bg-internal-note: #fef9f0;

    --c-danger:      #eb6c5c;
    --c-danger-100:  #fdeeed;
    --c-danger-500:  #e0513e;
    /* W4-1 — darker danger for AA contrast on light backgrounds (≥4.5:1 over #fdeeed) */
    --c-danger-700:  #99291b;

    /* W4-7 — chatbot guide/course tokens (replaces inline tailwind hex) */
    --c-guide-bg:     #f0fdf4;
    --c-guide-border: #22c55e;
    --c-guide-text:   #15803d;
    --c-course-bg:     #fffbeb;
    --c-course-border: #f59e0b;
    --c-course-text:   #92400e;

    --c-info:        #3b82f6;
    --c-info-100:    #eff6ff;
    --c-info-500:    #2563eb;

    /* -----------------------------------------------------------------------
       COLORS - Text
       ----------------------------------------------------------------------- */
    --c-text-dark:    #303030;
    --c-text-body:    #4a4a4a;
    --c-text-muted:   #8a8a8a;
    --c-text-inverse: #ffffff;

    /* -----------------------------------------------------------------------
       COLORS - Backgrounds
       ----------------------------------------------------------------------- */
    --c-bg-page:    #F4F6F7;
    --c-bg-surface: #ffffff;

    /* -----------------------------------------------------------------------
       COLORS - Borders
       ----------------------------------------------------------------------- */
    --c-border-light: #e5e7eb;

    /* -----------------------------------------------------------------------
       COLORS - Text (aliases)
       ----------------------------------------------------------------------- */
    --c-text-heading: var(--c-text-dark);

    /* -----------------------------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------------------------- */
    /* W6-9 P2-9 — Inter para body (legibilidad), Poppins para headings/display */
    --ff-main:    'Inter', 'Poppins', system-ui, sans-serif;
    --ff-body:    'Inter', 'Poppins', system-ui, sans-serif;
    --ff-display: 'Poppins', 'Inter', system-ui, sans-serif;
    --ff-title:   'Poppins', 'Inter', system-ui, sans-serif;

    --fs-xs:   0.75rem;   /* 12px */
    --fs-sm:   0.875rem;  /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-md:   1.125rem;  /* 18px */
    --fs-lg:   1.25rem;   /* 20px */
    --fs-xl:   1.5rem;    /* 24px */
    --fs-2xl:  1.875rem;  /* 30px */
    --fs-3xl:  2.25rem;   /* 36px */

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:  1.2;
    --lh-normal: 1.5;
    --lh-loose:  1.75;

    /* -----------------------------------------------------------------------
       SPACING
       ----------------------------------------------------------------------- */
    --space-0:   0;
    --space-1:   0.25rem;  /* 4px */
    --space-2:   0.5rem;   /* 8px */
    --space-3:   0.75rem;  /* 12px */
    --space-4:   1rem;     /* 16px */
    --space-5:   1.25rem;  /* 20px */
    --space-6:   1.5rem;   /* 24px */
    --space-8:   2rem;     /* 32px */
    --space-10:  2.5rem;   /* 40px */
    --space-12:  3rem;     /* 48px */
    --space-16:  4rem;     /* 64px */
    --space-20:  5rem;     /* 80px */

    /* -----------------------------------------------------------------------
       BORDER RADIUS
       ----------------------------------------------------------------------- */
    --radius-sm:   0.25rem;  /* 4px */
    --radius-md:   0.5rem;   /* 8px */
    --radius-lg:   0.75rem;  /* 12px */
    --radius-xl:   1rem;     /* 16px */
    --radius-2xl:  1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* -----------------------------------------------------------------------
       SHADOWS
       ----------------------------------------------------------------------- */
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07),
                  0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08),
                  0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08),
                  0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.06),
                   0 0 20px 0 rgba(20, 74, 76, 0.06);

    /* -----------------------------------------------------------------------
       TRANSITIONS
       ----------------------------------------------------------------------- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   350ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* -----------------------------------------------------------------------
       Z-INDEX SCALE
       ----------------------------------------------------------------------- */
    --z-dropdown:  10;
    --z-sticky:    20;
    --z-fixed:     30;
    --z-overlay:   40;
    --z-modal:     50;
    --z-popover:   60;
    --z-tooltip:   70;
    --z-toast:     80;

    /* -----------------------------------------------------------------------
       LAYOUT
       ----------------------------------------------------------------------- */
    --sidebar-width:     260px;
    --sidebar-collapsed: 64px;
    --topbar-height:     0px;
    --content-max-width: 1200px;
    --header-height:     64px;
}

/* -----------------------------------------------------------------------
   Reduced motion preference
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast:   0ms;
        --transition-base:   0ms;
        --transition-slow:   0ms;
        --transition-spring: 0ms;
    }
}