@import 'tailwindcss';
@import '@fontsource-variable/inter';
@import '@fontsource/barlow-condensed/500.css';
@import '@fontsource/barlow-condensed/600.css';
@import '@fontsource/barlow-condensed/700.css';

@source '../views';
@source '../js';

/*
 * Drilha Rob palette
 * - brand: the institutional red of the "DR" logo (#FF0000), deepened to #E10600 for AA contrast on white.
 * - gold: the vertical bar of the logo (#E6B832).
 * - steel: blue-tinted industrial greys / navy for dark sections.
 */
@theme {
    --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Barlow Condensed', 'Inter Variable', ui-sans-serif, sans-serif;

    --color-brand-50: #fff1f0;
    --color-brand-100: #ffdfdc;
    --color-brand-200: #ffc4bf;
    --color-brand-300: #ff9a92;
    --color-brand-400: #ff5f53;
    --color-brand-500: #ff2a1a;
    --color-brand-600: #e10600;
    --color-brand-700: #bd0700;
    --color-brand-800: #9c0d07;
    --color-brand-900: #81120d;
    --color-brand-950: #470402;

    --color-gold-50: #fdf9ec;
    --color-gold-100: #faefca;
    --color-gold-200: #f4dc91;
    --color-gold-300: #eec659;
    --color-gold-400: #e6b832;
    --color-gold-500: #d19a1c;
    --color-gold-600: #b47615;
    --color-gold-700: #915515;
    --color-gold-800: #784418;
    --color-gold-900: #663918;

    --color-steel-50: #f5f7fa;
    --color-steel-100: #eaeef3;
    --color-steel-200: #d1d9e3;
    --color-steel-300: #a9b8ca;
    --color-steel-400: #7a91ab;
    --color-steel-500: #5a7391;
    --color-steel-600: #465b77;
    --color-steel-700: #3a4a61;
    --color-steel-800: #232e3d;
    --color-steel-900: #141b26;
    --color-steel-950: #0b0f14;

    --container-8xl: 88rem;

    --animate-marquee: marquee var(--marquee-duration, 40s) linear infinite;

    @keyframes marquee {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }
}

@layer base {
    html {
        scroll-behavior: smooth;
        -webkit-tap-highlight-color: transparent;
    }

    :focus-visible {
        outline: 2px solid var(--color-gold-400);
        outline-offset: 2px;
    }

    ::selection {
        background: var(--color-brand-600);
        color: white;
    }

    [x-cloak], [v-cloak] {
        display: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@utility container-site {
    @apply mx-auto w-full max-w-8xl px-5 sm:px-8 lg:px-12;
}

@utility eyebrow {
    @apply inline-flex items-center font-display text-sm font-semibold tracking-[0.2em] text-brand-600 uppercase;
}

@utility heading-xl {
    @apply font-display text-5xl leading-[0.95] font-bold tracking-tight uppercase sm:text-6xl lg:text-7xl;
}

@utility heading-lg {
    @apply font-display text-4xl leading-none font-bold tracking-tight uppercase sm:text-5xl;
}

@utility heading-md {
    @apply font-display text-2xl leading-tight font-bold tracking-tight uppercase sm:text-3xl;
}

@utility btn {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3.5 text-sm font-semibold tracking-wide uppercase transition duration-200 disabled:cursor-not-allowed disabled:opacity-60;
}

@utility btn-primary {
    @apply btn bg-brand-600 text-white hover:bg-brand-700;
}

@utility btn-secondary {
    @apply btn bg-steel-900 text-white hover:bg-steel-800;
}

@utility btn-outline {
    @apply btn border border-current text-current hover:bg-white hover:text-steel-900;
}

@utility btn-ghost {
    @apply btn border border-steel-200 text-steel-800 hover:border-steel-900;
}

/* Angled industrial corner used on cards and media frames. */
@utility clip-corner {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%);
}

/* Admin form controls. */
@utility form-input {
    @apply block w-full rounded-md border border-steel-200 bg-white px-3 py-2 text-sm text-steel-900 shadow-xs transition placeholder:text-steel-400 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none disabled:bg-steel-50;
}

@utility form-label {
    @apply mb-1.5 block text-sm font-medium text-steel-700;
}

@utility card {
    @apply rounded-xl border border-steel-200/80 bg-white shadow-xs;
}

@utility admin-btn {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-3.5 py-2 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50;
}

@utility admin-btn-primary {
    @apply admin-btn bg-brand-600 text-white shadow-xs hover:bg-brand-700;
}

@utility admin-btn-secondary {
    @apply admin-btn border border-steel-200 bg-white text-steel-700 shadow-xs hover:bg-steel-50;
}

@utility admin-btn-danger {
    @apply admin-btn bg-red-50 text-red-700 hover:bg-red-100;
}

@utility admin-btn-ghost {
    @apply admin-btn text-steel-600 hover:bg-steel-100;
}

@layer components {
    /* Rich text produced by the CMS editor. */
    .prose-cms {
        @apply max-w-none text-[1.0625rem] leading-relaxed text-steel-700;
    }
    .prose-cms > * + * { @apply mt-5; }
    .prose-cms h2 { @apply mt-10 font-display text-3xl font-bold text-steel-900 uppercase; }
    .prose-cms h3 { @apply mt-8 font-display text-2xl font-bold text-steel-900 uppercase; }
    .prose-cms h4 { @apply mt-6 text-lg font-semibold text-steel-900; }
    .prose-cms a { @apply font-medium text-brand-600 underline decoration-brand-200 underline-offset-4 hover:decoration-brand-600; }
    .prose-cms ul { @apply list-disc space-y-2 pl-6 marker:text-brand-600; }
    .prose-cms ol { @apply list-decimal space-y-2 pl-6 marker:font-semibold marker:text-brand-600; }
    .prose-cms blockquote { @apply border-l-4 border-gold-400 bg-steel-50 py-4 pr-4 pl-6 text-lg text-steel-800 italic; }
    .prose-cms img { @apply h-auto w-full; }
    .prose-cms figure figcaption { @apply mt-2 text-sm text-steel-500; }
    .prose-cms table { @apply w-full border-collapse text-left text-base; }
    .prose-cms th { @apply border-b-2 border-steel-900 px-3 py-2 font-semibold text-steel-900; }
    .prose-cms td { @apply border-b border-steel-200 px-3 py-2; }
    .prose-cms iframe { @apply aspect-video h-auto w-full; }
    .prose-cms hr { @apply my-10 border-steel-200; }
    .prose-cms code { @apply bg-steel-100 px-1.5 py-0.5 text-sm; }

    .prose-invert-cms { @apply text-steel-300; }
    .prose-invert-cms h2, .prose-invert-cms h3, .prose-invert-cms h4 { @apply text-white; }
}

/* TipTap editor */
.tiptap {
    @apply min-h-64 px-4 py-3 focus:outline-none;
}
.tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    @apply pointer-events-none float-left h-0 text-steel-400;
}
.tiptap table td, .tiptap table th { @apply relative min-w-16 border border-steel-300 px-2 py-1; }
.tiptap .selectedCell::after { content: ''; @apply pointer-events-none absolute inset-0 bg-brand-500/10; }
.tiptap img.ProseMirror-selectednode { @apply outline-2 outline-brand-500; }