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

@layer base {
    :root {
        --background: 210 20% 98%;
        --foreground: 220 40% 5%;
        --muted: 210 20% 92%;
        --muted-foreground: 220 40% 40%;
        --popover: 0 0% 100%;
        --popover-foreground: 220 40% 5%;
        --card: 0 0% 100%;
        --card-foreground: 220 40% 5%;
        --border: 210 20% 90%;
        --input: 210 20% 90%;
        --primary: 199 60.47% 26.47%;
        --primary-foreground: 210 20% 98%;
        --secondary: 199 60% 30%;
        --secondary-foreground: 210 20% 98%;
        --accent: 199 60% 30%;
        --accent-foreground: 210 20% 98%;
        --destructive: 0 70% 50%;
        --destructive-foreground: 210 20% 98%;
        --ring: 199 60% 30%;
        --chart-1: 199 60% 30%;
        --chart-2: 199 50% 25%;
        --chart-3: 199 70% 35%;
        --chart-4: 199 50% 25%;
        --chart-5: 199 60% 30%;
        --positive: 142 76% 36%;
        --negative: 0 84% 60%;

/* SOC-696 badge tier ladder. Every rung is a PAIR: the palette spans
   the whole value range, so iron (a dark grey-brown) is invisible on a
   dark background and silver (near-white) is invisible on a light one.
   A single value per tier guarantees two unreadable rungs. */
        --tier-iron: 25 8% 38%;
        --tier-bronze: 25 65% 40%;
        --tier-silver: 210 12% 48%;
        --tier-gold: 42 41% 46%;
        --tier-platinum: 188 72% 40%;
        --tier-emerald: 160 70% 30%;
        --tier-diamond: 222 72% 46%;
        --tier-legend: 280 70% 45%;
        --tier-gold-deep: 41 45% 36%;
        --tier-gold-sheen: 46 60% 72%;
        --tier-gold-foreground: 40 45% 10%;
        --radius: 0.5rem;
    }

    .dark {
        --background: 220 40% 5%;
        --foreground: 210 20% 98%;
        /* Must stay distinct from --card (10%) so bg-muted reads on top of cards.
           Sits between --card (10%) and --border (15%). */
        --muted: 220 40% 14%;
        --muted-foreground: 210 20% 70%;
        --popover: 220 40% 8%;
        --popover-foreground: 210 20% 98%;
        --card: 220 40% 10%;
        --card-foreground: 210 20% 98%;
        --border: 220 40% 15%;
        --input: 220 40% 12%;
        --primary: 199 60% 30%;
        --primary-foreground: 210 20% 98%;
        --secondary: 199 60% 30%;
        --secondary-foreground: 210 20% 98%;
        --accent: 199 60% 30%;
        --accent-foreground: 210 20% 98%;
        --destructive: 0 70% 50%;
        --destructive-foreground: 210 20% 98%;
        --ring: 199 60% 30%;
        --chart-1: 199 60% 30%;
        --chart-2: 199 50% 25%;
        --chart-3: 199 70% 35%;
        --chart-4: 199 50% 25%;
        --chart-5: 199 60% 30%;
        --positive: 142 76% 36%;
        --negative: 0 84% 60%;

/* The same ladder, lifted to read on the dark background. */
        --tier-iron: 25 12% 62%;
        --tier-bronze: 25 70% 58%;
        --tier-silver: 210 16% 78%;
        --tier-gold: 46 54% 58%;
        --tier-platinum: 187 82% 62%;
        --tier-emerald: 160 65% 52%;
        --tier-diamond: 220 85% 68%;
        --tier-legend: 280 85% 70%;
        --tier-gold-deep: 41 45% 47%;
        --tier-gold-sheen: 46 70% 84%;
        --tier-gold-foreground: 40 45% 10%;
    }
}

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

    body {
        @apply bg-background text-foreground;
    }

    a:hover {
        cursor: pointer;
    }
}

@layer components {
    /* Brushed-gold button (SOC-696), matching the investor deck's medallion
       treatment: linear-gradient(135deg, #b08e42, #CEB35C).

       Two background layers do the work. The first is clipped to padding-box
       and paints the face; the second is clipped to border-box and shows
       through a TRANSPARENT border, which is what produces a gradient border —
       something border-color cannot express, since it takes a single colour.
       background-origin: border-box makes both layers share one coordinate
       space, so the sheen runs continuously from the border across the face
       instead of restarting at the padding edge.

       The border gradient carries a bright specular stop just past the middle;
       that off-centre highlight is what reads as polished metal rather than a
       flat yellow outline.

       Deliberately no `filter` here: filter makes an element a containing block
       for position:fixed descendants, which is exactly what broke the badge
       popovers. Hover shifts the gradient stops instead. */
    .btn-gold {
        border: 1px solid transparent;
        border-radius: var(--radius);
        color: hsl(var(--tier-gold-foreground));
        background-image:
            linear-gradient(135deg, hsl(var(--tier-gold-deep)), hsl(var(--tier-gold)) 55%, hsl(var(--tier-gold-deep))),
            linear-gradient(135deg,
                hsl(var(--tier-gold-deep)) 0%,
                hsl(var(--tier-gold)) 35%,
                hsl(var(--tier-gold-sheen)) 50%,
                hsl(var(--tier-gold)) 65%,
                hsl(var(--tier-gold-deep)) 100%);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        transition: background-image 200ms ease;
    }

    /* Both layers have to be restated. A single background-image against two
       background-clip values leaves the second clip with no layer to apply to,
       so the border-box gradient vanishes and the transparent border shows the
       page through it. */
    .btn-gold:hover {
        background-image:
            linear-gradient(135deg, hsl(var(--tier-gold)), hsl(var(--tier-gold-sheen)) 55%, hsl(var(--tier-gold))),
            linear-gradient(135deg,
                hsl(var(--tier-gold)) 0%,
                hsl(var(--tier-gold-sheen)) 40%,
                hsl(var(--tier-gold-sheen)) 60%,
                hsl(var(--tier-gold)) 100%);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    .dark .bg-muted.flex.h-full.w-full.items-center.justify-center.rounded-full {
        background-color: hsl(220 40% 18%);
    }

    .dark .bg-muted.rounded-lg.p-4,
    .dark .bg-muted.rounded-lg.p-3 {
        background-color: hsl(220 40% 15%);
    }

    .dark [data-state="on"] {
        background-color: transparent !important;
    }

    .dark [data-state="on"]:hover {
        background-color: hsl(220 40% 15%) !important;
    }

    /* Ticker animation */
    .animate-ticker {
        animation: ticker-scroll linear infinite;
    }

    @keyframes ticker-scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
}

@layer utilities {
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
}

/* Cap captcha widget (SOC-936). The widget renders in a shadow root that
   Tailwind classes can't reach, but it reads its colours from these custom
   properties, which do inherit into shadow DOM. Mapping them to the theme
   tokens makes it follow light and dark mode with the rest of the composer.
   Kept outside @layer so the rule is never purged. */
cap-widget {
    --cap-background: hsl(var(--card));
    --cap-color: hsl(var(--foreground));
    --cap-border-color: hsl(var(--border));
    --cap-checkbox-background: hsl(var(--input));
    --cap-checkbox-border: 1px solid hsl(var(--border));
    --cap-spinner-color: hsl(var(--foreground));
    --cap-spinner-background-color: hsl(var(--muted));
    --cap-focus-ring: hsl(var(--ring));
    --cap-troubleshoot-color: hsl(var(--muted-foreground));
    --cap-invalid-border-color: hsl(var(--destructive));
}