@import "tailwindcss";
@import "./components/card_team";
@import "./components/card_base";
@import "./components/card_related_page";
@import "./components/card_project";
@import "./components/card_media";

@theme{
    --color-primary: #FF4D00;
    --color-primary-light: #fff7ed;
    --color-primary-hover: #CC4600;
    --color-secondary: #1E293B;
    --color-secondary-dark: #1b2535;
    --color-secondary-light: #293445;
    --color-font-dark: #1E293B;
    --color-text-base: #475569;
    --color-contact-muted: #BBBEC4;
    --color-background: #F1F5F9;
    --color-description: #64748B;

    --color-placeholder: "#757575";

    /* Neutral Colors*/
    --color-gray-100: #E2E8F0;
    --color-gray-200: #CBD5E1;
    --color-gray-border: #E5E7EB;

    /* Publication colors by type */
    --color-publication-article-primary: #FF4D00;
    --color-publication-article-light: #fff7ed;
    --color-publication-article-gradient: #FF8800;
    --color-publication-podcast-primary: #7D3DED;
    --color-publication-podcast-light: #ede7fe;
    --color-publication-podcast-gradient: #A486F9;
    --color-publication-technical-note-primary: #FFBD31;
    --color-publication-technical-note-light: #fff9ed;
    --color-publication-technical-note-gradient: #FFE3A7;
    --color-publication-ebook-primary: #059669;
    --color-publication-ebook-light: #d6f6eb;
    --color-publication-ebook-gradient: #34D399;
    --color-publication-shorts-primary: #DB2777;
    --color-publication-shorts-light: #fde3f0;
    --color-publication-shorts-gradient: #F472B6;
    --color-publication-annual-report-primary: #111827;
    --color-publication-annual-report-light: #d4dae6;
    --color-publication-annual-report-gradient: #2C3C5D;
}

.publication-gradient--article {
    background-image: linear-gradient(135deg, var(--color-publication-article-primary), var(--color-publication-article-gradient));
}

.publication-gradient--podcast {
    background-image: linear-gradient(135deg, var(--color-publication-podcast-primary), var(--color-publication-podcast-gradient));
}

.publication-gradient--technical-note {
    background-image: linear-gradient(135deg, var(--color-publication-technical-note-primary), var(--color-publication-technical-note-gradient));
}

.publication-gradient--ebook {
    background-image: linear-gradient(135deg, var(--color-publication-ebook-primary), var(--color-publication-ebook-gradient));
}

.publication-gradient--shorts {
    background-image: linear-gradient(135deg, var(--color-publication-shorts-primary), var(--color-publication-shorts-gradient));
}

.publication-gradient--annual-report {
    background-image: linear-gradient(135deg, var(--color-publication-annual-report-primary), var(--color-publication-annual-report-gradient));
}

.publication-primary--article {
    background-color: var(--color-publication-article-primary);
}

.publication-primary--podcast {
    background-color: var(--color-publication-podcast-primary);
}

.publication-primary--technical-note {
    background-color: var(--color-publication-technical-note-primary);
}

.publication-primary--ebook {
    background-color: var(--color-publication-ebook-primary);
}

.publication-primary--shorts {
    background-color: var(--color-publication-shorts-primary);
}

.publication-primary--annual-report {
    background-color: var(--color-publication-annual-report-primary);
}

.asset-icon-mask {
    @apply inline-block;
    background-color: currentColor;
    mask-image: var(--icon-mask-url);
    -webkit-mask-image: var(--icon-mask-url);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

body {
    color: var(--color-text-base);
}

.layout-shell {
    @apply mx-auto w-full max-w-[1600px];
}

html.menu-open,
body.menu-open {
    overflow: hidden;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 200;
    transform: translateY(-220%);
    @apply rounded-md bg-white px-4 py-2 text-sm font-semibold text-font-dark shadow-md transition-transform duration-200;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Typography Components */
.h2-title {
    @apply text-font-dark text-2xl font-bold md:text-3xl;
}

/* Button Components and variants */

.btn{
    @apply flex w-full min-h-12 cursor-pointer items-center justify-center rounded-lg border-0 px-4 transition-[transform,background-color,border-color,color,box-shadow] duration-200 md:px-8;
}

.btn:is(:hover, :focus-visible){
    box-shadow: 0 8px 18px rgb(15 23 42 / 0.08);
    transform: translateY(-1px);
}

.btn:active{
    box-shadow: 0 4px 10px rgb(15 23 42 / 0.06);
    transform: translateY(1px);
}

.btn--cta{
    @apply bg-primary text-white font-bold md:max-w-52;

    &:is(:hover, :focus-visible){
        @apply bg-primary-hover outline-none;
    }

    &:active{
        @apply bg-primary-hover;
    }
}

.btn--muted{
    @apply bg-gray-100 text-font-dark font-bold md:max-w-52;

    &:is(:hover, :focus-visible){
        @apply bg-gray-200 outline-none;
    }

    &:active{
        @apply bg-gray-200;
    }
}

.btn--white{
    @apply bg-white text-primary font-bold cursor-pointer;

    &:is(:hover, :focus-visible){
        @apply bg-primary text-white outline-none;
    }

    &:active{
        @apply bg-primary-hover text-white;
    }
}

.btn--outline-secondary{
    @apply border border-secondary bg-white text-font-dark font-bold;

    &:is(:hover, :focus-visible){
        @apply bg-secondary text-white outline-none;
    }

    &:active{
        @apply bg-secondary-dark text-white;
    }
}

.btn--dark{
    @apply bg-secondary text-white font-bold;

    &:is(:hover, :focus-visible){
        @apply bg-secondary-light outline-none;
    }

    &:active{
        @apply bg-secondary-dark;
    }
}

.btn--pill-neutral{
    @apply inline-flex w-fit rounded-full border border-gray-200 bg-gray-50 text-font-dark font-bold;

    &:is(:hover, :focus-visible){
        @apply bg-gray-100 border-gray-300 outline-none;
    }

    &:active{
        @apply bg-gray-200 border-gray-300;
    }
}

.video-embed{
    @apply relative w-full overflow-hidden rounded-xl border border-gray-border bg-gray-50;
    padding-top: 56.25%;
}

.video-embed__frame{
    @apply absolute inset-0 h-full w-full;
}

.video-embed--podcast{
    padding-top: 352px;
}

@media (min-width: 768px){
    .video-embed--podcast{
        padding-top: 232px;
    }
}

/* Form Components (inputs, textareas, seletc) */
.form-field{
    @apply w-full px-4 py-3.5 bg-white border rounded-lg border-gray-border text-font-dark transition-[border-color,box-shadow] duration-200;

    &::placeholder{
        color: var(--color-description);
    }

    &:hover{
        @apply border-gray-200;
    }

    &:is(:focus, :focus-visible){
        @apply outline-none border-primary ring-4 ring-primary/15;
    }
}

.form-field__input{
    @apply h-12;
}

.form-field__textarea{
    @apply min-h-24 resize-none;
}

.form-label{
    @apply text-xs font-bold uppercase text-description;
}

/* Publication aside filter buttons */
.publication-filter-button{
    @apply flex w-full items-center justify-between gap-3 rounded-lg border px-4 py-3.5 text-left font-bold transition-[transform,box-shadow,border-color,color,background-color] duration-200;
    box-shadow: 0 2px 6px rgb(15 23 42 / 0.04);
}

.publication-filter-button:is(:hover, :focus-visible){
    box-shadow: 0 8px 18px rgb(15 23 42 / 0.08);
    transform: translateY(-2px);
}

.publication-filter-button:active{
    box-shadow: 0 4px 10px rgb(15 23 42 / 0.06);
    transform: translateY(-1px);
}

.publication-filter-button__label{
    @apply min-w-0 text-sm leading-5;
}

.publication-filter-button__icon{
    @apply shrink-0;
}

/* Contact info icons */
.contact-icon {
    @apply inline-flex items-center justify-center text-primary shrink-0;
}

.contact-muted-text {
    color: var(--color-contact-muted);
}

.social-icon-button {
    @apply inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border transition-[transform,box-shadow,background-color,border-color,color] duration-200;
}

.social-icon-button--compact {
    @apply h-8 w-8;
}

.social-icon-button:is(:hover, :focus-visible){
    box-shadow: 0 8px 18px rgb(15 23 42 / 0.08);
    transform: translateY(-2px);
}

.social-icon-button:active{
    box-shadow: 0 4px 10px rgb(15 23 42 / 0.06);
    transform: translateY(-1px);
}

.social-icon-button--light {
    @apply text-white;
    border-color: rgb(255 255 255 / 0.2);
    background-color: rgb(255 255 255 / 0.1);

    &:is(:hover, :focus-visible){
        border-color: rgb(255 255 255 / 0.35);
        background-color: rgb(255 255 255 / 0.18);
        @apply outline-none;
    }

    &:active{
        background-color: rgb(255 255 255 / 0.24);
    }
}

.social-icon-button--neutral {
    @apply text-description border-gray-200 bg-background;

    &:is(:hover, :focus-visible){
        @apply border-primary bg-primary-light text-primary outline-none;
    }

    &:active{
        @apply border-primary bg-primary-light text-primary;
    }
}

.clipboard-toast {
    @apply pointer-events-none fixed left-1/2 top-5 z-[120] w-max max-w-[calc(100vw-2rem)] rounded-xl bg-font-dark px-4 py-3 text-sm font-semibold text-white opacity-0 shadow-lg transition-[opacity,transform] duration-200;
    transform: translate(-50%, -8px);
}

.clipboard-toast--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.clipboard-toast--error {
    @apply bg-primary;
}

.clipboard-action-button {
    @apply inline-flex cursor-pointer items-center gap-[6px] text-sm font-bold text-primary underline-offset-4 transition-colors duration-200;
}

.clipboard-action-button:is(:hover, :focus-visible, :active) {
    @apply text-primary underline outline-none;
}

.publication-detail-doi {
    @apply w-fit break-all font-semibold underline decoration-1 underline-offset-4 transition-opacity duration-200;
    color: var(--color-primary);
}

.publication-detail-doi:is(:hover, :focus-visible, :active) {
    @apply opacity-80 outline-none;
}

.inline-action-link {
    @apply inline-flex cursor-pointer items-center gap-2 text-sm font-semibold text-primary underline-offset-4 transition-colors duration-200;
}

.inline-action-link:is(:hover, :focus-visible, :active) {
    @apply text-primary underline outline-none;
}

.inline-action-link--lift {
    @apply transition-[color,transform] duration-200 ease-out;
}

.inline-action-link--lift:is(:hover, :focus-visible) {
    @apply text-primary-hover no-underline outline-none;
    transform: translateY(-2px);
}

.inline-action-link--lift:active {
    @apply text-primary-hover no-underline;
    transform: translateY(-1px);
}

/* Footer quick links */
.footer-quick-link {
    @apply relative isolate inline-flex items-center gap-2 text-gray-200 transition-colors duration-200;
}

.footer-quick-link::before {
    content: "";
    position: absolute;
    inset: -0.5rem -0.75rem;
    border-radius: 0.75rem;
    background-color: rgb(255 255 255 / 0.08);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: -1;
}

.footer-quick-link svg {
    @apply transition-[transform,color] duration-200;
}

.footer-quick-link:is(:hover, :focus-visible) {
    @apply text-white outline-none;
}

.footer-quick-link:is(:hover, :focus-visible)::before {
    opacity: 1;
    transform: scale(1);
}

.footer-quick-link:is(:hover, :focus-visible) svg {
    @apply text-primary;
    transform: translateX(2px);
}

/* Header desktop nav links */
.header-nav-link {
    @apply border-b-2 border-transparent text-font-dark font-medium transition-colors;

    &:is(:hover, :focus-visible){
        @apply text-primary outline-none;
    }
}

.header-nav-link--active {
    @apply border-primary text-primary font-bold;
}

/* Header mobile menu */
.menu-toggle-button {
    @apply relative h-11 w-11 rounded-md text-font-dark transition-[color,background-color,transform] duration-200;
}

.menu-toggle-button:is(:hover, :focus-visible) {
    @apply bg-primary-light text-primary outline-none;
}

.menu-toggle-button:active {
    @apply bg-primary-light text-primary;
    transform: scale(0.96);
}

.menu-toggle-button__icon {
    @apply relative h-5 w-6;
}

.menu-toggle-button__line {
    @apply absolute left-0 h-0.5 w-full rounded-full bg-current transition-[transform,opacity,top,bottom] duration-300;
}

.menu-toggle-button__line--top {
    top: 0.125rem;
}

.menu-toggle-button__line--middle {
    top: 50%;
    transform: translateY(-50%);
}

.menu-toggle-button__line--bottom {
    bottom: 0.125rem;
}

.mobile-menu-backdrop {
    @apply fixed inset-0 bg-secondary/70 opacity-0 transition-opacity duration-300 lg:hidden;
    z-index: 90;
}

.mobile-menu-backdrop--open {
    @apply opacity-100;
}

.mobile-menu-panel {
    @apply fixed top-0 right-0 flex min-h-full w-80 max-w-[88vw] flex-col gap-4 bg-gray-50 opacity-0 lg:hidden;
    transform: translate3d(100%, 0, 0);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
    will-change: transform, opacity;
    z-index: 100;
}

.mobile-menu-panel--open {
    @apply opacity-100;
    transform: translate3d(0, 0, 0);
}

/* Header mobile menu links */
.mobile-menu-link{
    @apply block w-full border-l-[3px] border-transparent px-8 py-4 font-medium text-font-dark transition-colors;

    &:is(:hover, :active){
        @apply bg-primary-light text-primary;
    }

    &:focus-visible{
        @apply bg-primary-light text-primary outline-none ring-2 ring-primary ring-inset;
    }
}

.mobile-menu-link--active {
    @apply border-primary bg-primary-light font-bold text-primary;
}