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

    /* SOC-756: the deep-link flash.

       A room URL carrying `?message=<uuid>` scrolls to that row; this is what
       tells the viewer WHICH row they were sent to. The scroll itself is
       instant (see room_chat_controller.js), so this pulse is the only thing
       that points at the message.

       🚨 HAND-WRITTEN RATHER THAN A TAILWIND UTILITY, deliberately. The class
       is added from JavaScript, and Tailwind generates nothing for a name that
       exists only inside a JS string — the rule would silently not exist while
       the controller looked correct. `.animate-ticker` above is here for the
       same reason.

       🚨 RUNS ONCE. `animation-iteration-count` defaults to 1 and must stay
       there: the controller removes the class on `animationend`, and an
       `infinite` animation never fires that event, so the row would pulse for
       as long as the page is open and the class would never come off.

       Theme-aware through the token, not a literal: `--primary` resolves per
       theme, so the pulse reads on both the light and the dark surface
       (.claude/rules/views.md). The alpha is spelled with a slash rather than
       via `theme()`, which silently generates nothing for colour tokens that
       carry `<alpha-value>`.

       🚨 `prefers-reduced-motion` STILL RUNS AN ANIMATION, and that is the
       point of `steps(1, end)` rather than `animation: none`. A steady hold is
       what a reduced-motion viewer should get — no fade, no movement — but
       `animation: none` fires no `animationend`, so the controller's listener
       never runs and the row wears the class for the rest of the session. A
       single-step animation has no perceived motion (the colour holds flat and
       jumps once at the end) while still ending, so the class comes off here
       exactly as it does everywhere else. The hold is longer and lighter than
       the pulse it replaces: with no fade drawing the eye, it has to stay
       readable long enough to find. */
    .room-message-flash {
        animation: room-message-flash 1.2s ease-out;
        border-radius: 0.375rem;
    }

    @keyframes room-message-flash {
        0% {
            background-color: hsl(var(--primary) / 0.28);
        }
        100% {
            background-color: hsl(var(--primary) / 0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .room-message-flash {
            animation: room-message-flash-hold 2.4s steps(1, end);
        }
    }

    @keyframes room-message-flash-hold {
        0% {
            background-color: hsl(var(--primary) / 0.18);
        }
        100% {
            background-color: hsl(var(--primary) / 0);
        }
    }
}

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