@import 'tailwindcss';

@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../app/Livewire/**/*.php';

/*
|------------------------------------------------------------------------------
| KCU Design Tokens (PRD 57, 58)
|------------------------------------------------------------------------------
| The single source of brand colour and type scale. Components reference these
| semantic tokens only - no hex values anywhere else in the codebase.
|
| Brand: deep green #0B6232 with gold #FFC66B, taken from kcu.ac.ug.
*/

@theme {
    /* Primary - KCU green */
    --color-brand-50: #f0f9f4;
    --color-brand-100: #dcf2e4;
    --color-brand-200: #bbe5cb;
    --color-brand-300: #8ad0a8;
    --color-brand-400: #52b37f;
    --color-brand-500: #2e9660;
    --color-brand-600: #1e7a4c;
    --color-brand-700: #0b6232;
    --color-brand-800: #084b27;
    --color-brand-900: #073f24;
    --color-brand-950: #032313;

    /* Secondary - KCU gold */
    --color-gold-50: #fff9ef;
    --color-gold-100: #fff1d9;
    --color-gold-200: #ffe1b0;
    --color-gold-300: #ffc66b;
    --color-gold-400: #fbb03b;
    --color-gold-500: #f59e1b;
    --color-gold-600: #d97f0d;
    --color-gold-700: #b45e0e;
    --color-gold-800: #924a13;
    --color-gold-900: #783d13;

    /* Surfaces */
    --color-canvas: #f7f9fc;

    /* Typography */
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;

    --text-hero: 3.5rem;
    --text-hero--line-height: 1.05;
    --text-hero--letter-spacing: -0.02em;

    --text-display: 2.75rem;
    --text-display--line-height: 1.1;
    --text-display--letter-spacing: -0.02em;

    --text-section: 2rem;
    --text-section--line-height: 1.2;
    --text-section--letter-spacing: -0.01em;
}

/*
|------------------------------------------------------------------------------
| Base
|------------------------------------------------------------------------------
*/

@layer base {
    html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body {
        @apply bg-white text-slate-700 font-sans antialiased;
        font-size: 1rem;
        line-height: 1.65;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply text-slate-900 font-semibold;
        text-wrap: balance;
    }

    /* Every interactive element gets a visible, consistent focus ring (PRD 61). */
    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        @apply outline-none ring-2 ring-brand-700 ring-offset-2 ring-offset-white rounded-sm;
    }

    ::selection {
        @apply bg-brand-700 text-white;
    }

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

/*
|------------------------------------------------------------------------------
| Components
|------------------------------------------------------------------------------
*/

@layer components {
    .container-page {
        @apply mx-auto w-full max-w-7xl px-5 sm:px-6 lg:px-8;
    }

    .container-prose {
        @apply mx-auto w-full max-w-3xl px-5 sm:px-6;
    }

    /* Long-form CMS content rendered from the database. */
    .prose-kcu {
        @apply text-slate-700 leading-relaxed;
    }
    .prose-kcu h2 {
        @apply mt-10 mb-3 text-2xl font-semibold text-slate-900;
    }
    .prose-kcu h3 {
        @apply mt-8 mb-2 text-xl font-semibold text-slate-900;
    }
    .prose-kcu p {
        @apply mb-4;
    }
    .prose-kcu ul {
        @apply mb-4 list-disc space-y-1 pl-5;
    }
    .prose-kcu ol {
        @apply mb-4 list-decimal space-y-1 pl-5;
    }
    .prose-kcu a {
        @apply text-brand-700 underline underline-offset-2 hover:text-brand-800;
    }
    .prose-kcu strong {
        @apply font-semibold text-slate-900;
    }
    .prose-kcu blockquote {
        @apply my-6 border-l-4 border-gold-300 bg-gold-50 py-3 pl-5 pr-4 italic text-slate-700;
    }
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }

    /* Hairline separator used across dashboard panels. */
    .divide-hairline > * + * {
        @apply border-t border-slate-200;
    }
}
