@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;
    }
}