@tailwind base;
@tailwind components;
@tailwind utilities;

/* Design Tokens - Light Mode - REBRAND */
@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 210 29% 24%;
        --border: 214 20% 88%;
        --card: 0 0% 100%;
        --card-foreground: 210 29% 24%;
        --popover: 0 0% 100%;
        --popover-foreground: 210 29% 24%;
        /* PRIMARY: Slate-Navy — authoritative, enterprise */
        --primary: 222 47% 28%;
        --primary-foreground: 0 0% 100%;
        /* CTA: Safety Orange — exclusive to primary action buttons */
        --cta: 24 95% 50%;
        --cta-foreground: 0 0% 100%;
        --secondary: 214 20% 94%;
        --secondary-foreground: 210 29% 24%;
        --muted: 214 16% 95%;
        --muted-foreground: 215 10% 46%;
        /* Accent: Emerald Green — AI features, compliance, safety signal */
        --accent: 152 60% 36%;
        --accent-foreground: 0 0% 100%;
        --destructive: 354 70% 54%;
        --destructive-foreground: 0 0% 100%;
        --success: 134 61% 41%;
        --success-foreground: 0 0% 100%;
        --warning: 37 90% 51%;
        --warning-foreground: 0 0% 10%;
        --info: 204 68% 52%;
        --info-foreground: 0 0% 100%;
        --input: 214 20% 82%;
        --ring: 222 47% 28%;
        --chart-1: 222 47% 28%;
        --chart-2: 134 61% 41%;
        --chart-3: 204 68% 52%;
        --chart-4: 37 90% 51%;
        --chart-5: 280 65% 55%;
        --radius: 0.5rem;
    }

    .dark {
        --background: 222 47% 8%;
        --foreground: 210 20% 94%;
        --border: 222 30% 18%;
        --card: 222 40% 12%;
        --card-foreground: 210 20% 94%;
        --popover: 222 40% 14%;
        --popover-foreground: 210 20% 94%;
        --primary: 222 60% 55%;
        --primary-foreground: 0 0% 100%;
        --cta: 24 95% 55%;
        --cta-foreground: 0 0% 100%;
        --secondary: 222 30% 18%;
        --secondary-foreground: 210 20% 94%;
        --muted: 222 30% 16%;
        --muted-foreground: 215 10% 62%;
        --accent: 152 60% 46%;
        --accent-foreground: 0 0% 100%;
        --destructive: 354 70% 50%;
        --destructive-foreground: 0 0% 100%;
        --success: 134 61% 50%;
        --success-foreground: 0 0% 100%;
        --warning: 37 90% 56%;
        --warning-foreground: 0 0% 10%;
        --info: 204 68% 60%;
        --info-foreground: 0 0% 100%;
        --input: 222 30% 28%;
        --ring: 222 60% 55%;
        --chart-1: 222 60% 60%;
        --chart-2: 134 61% 52%;
        --chart-3: 204 68% 62%;
        --chart-4: 37 90% 58%;
        --chart-5: 280 65% 65%;
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
        /* Font stack: Segoe UI first to match CGS product on Windows, Inter as modern fallback */
        font-family: 'Segoe UI', Inter, system-ui, -apple-system, Roboto, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ============================================
   ENHANCED COLOR UTILITIES
   Use these classes to add more color throughout your site
   ============================================ */

@layer utilities {
    /* ── Section backgrounds with alternating rhythm ── */
    .bg-gradient-light-section {
        /* Subtle navy-tinted gray — ties sections to the primary brand */
        background: linear-gradient(135deg, #f0f4f8, #e4eaf2);
    }

    .bg-section-alt {
        /* Pure white alternate — creates visual cadence between sections */
        background-color: #ffffff;
    }

    .bg-gradient-detail-section {
        background: linear-gradient(135deg, #f0f4f8, #e4eaf2);
    }

    .bg-gradient-footer {
        /* CGS product sidebar gradient — unchanged, provides strong anchor */
        background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
    }

    /* Strong hero gradient — navy top-left to white centre */
    .bg-gradient-hero {
        background: linear-gradient(135deg,
            hsl(222 47% 18% / 0.12) 0%,
            hsl(222 47% 28% / 0.06) 40%,
            hsl(0 0% 100%) 100%);
    }

    /* CTA gradient — orange for primary action buttons */
    .bg-gradient-cta {
        background: linear-gradient(135deg, hsl(24 95% 50%) 0%, hsl(24 95% 42%) 100%);
    }

    /* Primary gradient — navy for headers, featured sections */
    .bg-gradient-primary {
        background: linear-gradient(135deg, hsl(222 47% 28%) 0%, hsl(222 47% 20%) 100%);
    }

    .bg-gradient-accent {
        background: linear-gradient(135deg, hsl(var(--accent) / 0.08), hsl(var(--accent) / 0.15));
    }

    .bg-gradient-mixed {
        background: linear-gradient(135deg, hsl(var(--primary) / 0.05), hsl(var(--background)), hsl(var(--accent) / 0.04));
    }

    /* Card Accent Borders */
    .card-primary {
        border-left: 4px solid hsl(var(--primary));
    }

    .card-accent {
        border-left: 4px solid hsl(var(--accent));
    }

    .card-success {
        border-left: 4px solid hsl(var(--success));
    }

    .card-warning {
        border-left: 4px solid hsl(var(--warning));
    }

    /* Highlight Boxes */
    .highlight-box-primary {
        @apply rounded-lg p-6;
        background: linear-gradient(135deg, hsl(var(--primary) / 0.08), hsl(var(--primary) / 0.03));
        border: 1px solid hsl(var(--primary) / 0.15);
    }

    .highlight-box-accent {
        @apply rounded-lg p-6;
        background: linear-gradient(135deg, hsl(var(--accent) / 0.1), hsl(var(--accent) / 0.05));
        border: 1px solid hsl(var(--accent) / 0.2);
    }

    .highlight-box-success {
        @apply rounded-lg p-6;
        background: linear-gradient(135deg, hsl(var(--success) / 0.1), hsl(var(--success) / 0.05));
        border: 1px solid hsl(var(--success) / 0.2);
    }

    /* Text Colors */
    .text-accent {
        color: hsl(var(--accent));
    }

    .text-success {
        color: hsl(var(--success));
    }

    .text-warning {
        color: hsl(var(--warning));
    }

    .text-info {
        color: hsl(var(--info));
    }

    /* Icon Boxes with Color */
    .icon-box-primary {
        @apply rounded-lg p-3 inline-flex items-center justify-center;
        background-color: hsl(var(--primary) / 0.1);
        color: hsl(var(--primary));
    }

    .icon-box-accent {
        @apply rounded-lg p-3 inline-flex items-center justify-center;
        background-color: hsl(var(--accent) / 0.1);
        color: hsl(var(--accent));
    }

    .icon-box-success {
        @apply rounded-lg p-3 inline-flex items-center justify-center;
        background-color: hsl(var(--success) / 0.1);
        color: hsl(var(--success));
    }

    .icon-box-warning {
        @apply rounded-lg p-3 inline-flex items-center justify-center;
        background-color: hsl(var(--warning) / 0.1);
        color: hsl(var(--warning));
    }

    .icon-box-info {
        @apply rounded-lg p-3 inline-flex items-center justify-center;
        background-color: hsl(var(--info) / 0.1);
        color: hsl(var(--info));
    }

    /* Decorative Elements */
    .accent-bar {
        height: 4px;
        background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
        @apply rounded-full;
    }

    .accent-dot {
        @apply w-2 h-2 rounded-full inline-block;
        background-color: hsl(var(--accent));
    }

    /* Section Dividers */
    .section-divider-primary {
        border-top: 3px solid hsl(var(--primary) / 0.2);
    }

    .section-divider-accent {
        border-top: 3px solid hsl(var(--accent) / 0.3);
    }

    /* Hover Effects with Color */
    .hover-primary:hover {
        background-color: hsl(var(--primary) / 0.05);
        border-color: hsl(var(--primary) / 0.3);
    }

    .hover-accent:hover {
        background-color: hsl(var(--accent) / 0.05);
        border-color: hsl(var(--accent) / 0.3);
    }

    /* Badge Variants */
    .badge-primary {
        @apply px-3 py-1 rounded-full text-xs font-medium;
        background-color: hsl(var(--primary) / 0.1);
        color: hsl(var(--primary));
        border: 1px solid hsl(var(--primary) / 0.2);
    }

    .badge-accent {
        @apply px-3 py-1 rounded-full text-xs font-medium;
        background-color: hsl(var(--accent) / 0.1);
        color: hsl(var(--accent));
        border: 1px solid hsl(var(--accent) / 0.2);
    }

    .badge-success {
        @apply px-3 py-1 rounded-full text-xs font-medium;
        background-color: hsl(var(--success) / 0.1);
        color: hsl(var(--success));
        border: 1px solid hsl(var(--success) / 0.2);
    }

    /* Button Variants */
    .btn-accent {
        @apply px-4 py-2 rounded-md font-medium transition-all;
        background-color: hsl(var(--accent));
        color: hsl(var(--accent-foreground));
    }

        .btn-accent:hover {
            background-color: hsl(var(--accent) / 0.9);
        }

    .btn-success {
        @apply px-4 py-2 rounded-md font-medium transition-all;
        background-color: hsl(var(--success));
        color: hsl(var(--success-foreground));
    }

        .btn-success:hover {
            background-color: hsl(var(--success) / 0.9);
        }
}

/* Custom Animations */
@layer utilities {
    @keyframes shimmer {
        0% {
            background-position: -1000px 0;
        }

        100% {
            background-position: 1000px 0;
        }
    }

    .animate-shimmer {
        background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--accent) / 0.1), hsl(var(--muted)) );
        background-size: 1000px 100%;
        animation: shimmer 3s infinite;
    }

    @keyframes fade-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in {
        animation: fade-in 0.5s ease-out;
    }
}