@import 'tailwindcss';

/* Self-hosted fonts (D-002): bundled by Vite, cached by the service worker, no third-party request.
   Browsers download only the subsets a page uses (unicode-range). */
@import '@fontsource-variable/inter';
@import '@fontsource-variable/fraunces/opsz.css';
@import '@fontsource-variable/fraunces/opsz-italic.css';
@import '@fontsource/ibm-plex-mono/400.css';
@import '@fontsource/ibm-plex-mono/500.css';

@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";

@custom-variant dark (&:where(.dark, .dark *));

/* Inline so bg-rail reads --rail-current where it is used: the layout's room class switches it per user. */
@theme inline {
    --color-rail: var(--rail-current);
}

/*
 * TOBAS "Hymnal" design system (D-002; reference prototype in public/prototype/).
 *
 * The pages use five Tailwind colour families (slate, brand, rose, amber, emerald) plus white, mostly as
 * "dark text on a light tint". Each family is redefined here as a warm Hymnal ramp, and dark mode swaps
 * the ramps at runtime: tints become deep tones and text shades become light, so every existing page
 * gets both themes without editing it. Steps 500-600 stay mid-tone in both themes because they are used
 * as button and bar fills.
 */
@theme {
    --font-sans: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Fraunces Variable', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --color-white: var(--h-white);
    /* Constant in both themes: text on oxblood, and the sidebar/header colour */
    --color-paper: #FBF8F2;
    --color-oxblood: #5E1A28;
    --color-slate-50: var(--h-slate-50);
    --color-slate-100: var(--h-slate-100);
    --color-slate-200: var(--h-slate-200);
    --color-slate-300: var(--h-slate-300);
    --color-slate-400: var(--h-slate-400);
    --color-slate-500: var(--h-slate-500);
    --color-slate-600: var(--h-slate-600);
    --color-slate-700: var(--h-slate-700);
    --color-slate-800: var(--h-slate-800);
    --color-slate-900: var(--h-slate-900);
    --color-slate-950: var(--h-slate-950);

    --color-brand-50: var(--h-brand-50);
    --color-brand-100: var(--h-brand-100);
    --color-brand-200: var(--h-brand-200);
    --color-brand-300: var(--h-brand-300);
    --color-brand-400: var(--h-brand-400);
    --color-brand-500: var(--h-brand-500);
    --color-brand-600: var(--h-brand-600);
    --color-brand-700: var(--h-brand-700);
    --color-brand-800: var(--h-brand-800);
    --color-brand-900: var(--h-brand-900);

    --color-gold-100: var(--h-gold-100);
    --color-gold-300: var(--h-gold-300);
    --color-gold-500: var(--h-gold-500);
    --color-gold-700: var(--h-gold-700);

    --color-rose-50: var(--h-rose-50);
    --color-rose-100: var(--h-rose-100);
    --color-rose-200: var(--h-rose-200);
    --color-rose-300: var(--h-rose-300);
    --color-rose-400: var(--h-rose-400);
    --color-rose-500: var(--h-rose-500);
    --color-rose-600: var(--h-rose-600);
    --color-rose-700: var(--h-rose-700);
    --color-rose-800: var(--h-rose-800);
    --color-rose-900: var(--h-rose-900);

    --color-amber-50: var(--h-amber-50);
    --color-amber-100: var(--h-amber-100);
    --color-amber-200: var(--h-amber-200);
    --color-amber-300: var(--h-amber-300);
    --color-amber-400: var(--h-amber-400);
    --color-amber-500: var(--h-amber-500);
    --color-amber-600: var(--h-amber-600);
    --color-amber-700: var(--h-amber-700);
    --color-amber-800: var(--h-amber-800);
    --color-amber-900: var(--h-amber-900);

    --color-emerald-50: var(--h-emerald-50);
    --color-emerald-100: var(--h-emerald-100);
    --color-emerald-200: var(--h-emerald-200);
    --color-emerald-300: var(--h-emerald-300);
    --color-emerald-400: var(--h-emerald-400);
    --color-emerald-500: var(--h-emerald-500);
    --color-emerald-600: var(--h-emerald-600);
    --color-emerald-700: var(--h-emerald-700);
    --color-emerald-800: var(--h-emerald-800);
    --color-emerald-900: var(--h-emerald-900);
}

:root {
    color-scheme: light;
    --h-page: #F6F1E7;          /* parchment */
    --h-white: #FBF8F2;         /* card surface */
    --h-slate-50: #F3EDE2;
    --h-slate-100: #EDE5D7;
    --h-slate-200: #DCD2BF;
    --h-slate-300: #C4B69C;
    --h-slate-400: #9C8F7C;
    --h-slate-500: #6F6457;
    --h-slate-600: #5A5047;
    --h-slate-700: #4A423A;
    --h-slate-800: #332D27;
    --h-slate-900: #1E1A17;
    --h-slate-950: #14110F;

    --h-brand-50: #F8EEEC;
    --h-brand-100: #F1DEDC;
    --h-brand-200: #E6C3C3;
    --h-brand-300: #D49AA0;
    --h-brand-400: #B5606F;
    --h-brand-500: #7A2536;
    --h-brand-600: #5E1A28;     /* oxblood */
    --h-brand-700: #4A1520;
    --h-brand-800: #3A0F18;
    --h-brand-900: #2A0B12;

    --h-gold-100: #F3E7CC;
    --h-gold-300: #D9BC7E;
    --h-gold-500: #B8893B;      /* burnished gold */
    --h-gold-700: #8A6424;

    --h-rose-50: #FBEEEA;  --h-rose-100: #F6DDD6;  --h-rose-200: #EDC2B8;  --h-rose-300: #E0A091;  --h-rose-400: #CC7462;
    --h-rose-500: #B8503C;  --h-rose-600: #A3321F;  --h-rose-700: #8A2A1A;  --h-rose-800: #6E2215;  --h-rose-900: #561A10;
    --h-amber-50: #FBF3E2;  --h-amber-100: #F5E6C8;  --h-amber-200: #ECD3A2;  --h-amber-300: #DFBA72;  --h-amber-400: #CC9A45;
    --h-amber-500: #B07A22;  --h-amber-600: #8F5A0B;  --h-amber-700: #7A4C0A;  --h-amber-800: #633D08;  --h-amber-900: #4D3006;
    --h-emerald-50: #EEF3E8;  --h-emerald-100: #E3ECD9;  --h-emerald-200: #C9DAB8;  --h-emerald-300: #A6C190;  --h-emerald-400: #7FA266;
    --h-emerald-500: #5A8446;  --h-emerald-600: #3F6B3A;  --h-emerald-700: #355A31;  --h-emerald-800: #2A4827;  --h-emerald-900: #20371E;

    /* Sidebar: oxblood for a branch, ink for Headquarters (network roles) */
    --rail-branch: #3A0F18;
    --rail-hq: #1E1A17;
    --rail-current: var(--rail-branch);

    /* Chart series, validated for colour-blind separation and contrast (D-004) */
    --series-1: #963247;
    --series-2: #A2772E;
}
.room-hq { --rail-current: var(--rail-hq); }

:root.dark {
    color-scheme: dark;
    --h-page: #15110F;
    --h-white: #1D1815;
    --h-slate-50: #221C18;
    --h-slate-100: #2A231E;
    --h-slate-200: #3A322B;
    --h-slate-300: #54483D;
    --h-slate-400: #7D7062;
    --h-slate-500: #A0937F;
    --h-slate-600: #BDB09C;
    --h-slate-700: #D2C6B3;
    --h-slate-800: #E4DACA;
    --h-slate-900: #F1E9DC;
    --h-slate-950: #FBF5EC;

    --h-brand-50: #2A1418;
    --h-brand-100: #3A1A20;
    --h-brand-200: #5A2833;
    --h-brand-300: #E49AA6;
    --h-brand-400: #D17A89;
    --h-brand-500: #B04A60;
    --h-brand-600: #8E2C40;
    --h-brand-700: #E49AA6;
    --h-brand-800: #F1C9CF;
    --h-brand-900: #F8E3E6;

    --h-gold-100: #3A2E1A;
    --h-gold-300: #A88446;
    --h-gold-500: #C9A04F;
    --h-gold-700: #D9B66E;

    --h-rose-50: #2C1813;  --h-rose-100: #3D1E18;  --h-rose-200: #5A2A20;  --h-rose-300: #7E3A2C;  --h-rose-400: #B5533F;
    --h-rose-500: #C9604B;  --h-rose-600: #B4442F;  --h-rose-700: #EE8C78;  --h-rose-800: #F4AE9F;  --h-rose-900: #F8CFC6;
    --h-amber-50: #2A2112;  --h-amber-100: #3A2C14;  --h-amber-200: #54401D;  --h-amber-300: #7A5C28;  --h-amber-400: #B88A3A;
    --h-amber-500: #C99A45;  --h-amber-600: #9C6E1E;  --h-amber-700: #E0AE58;  --h-amber-800: #EBC57F;  --h-amber-900: #F3DCAE;
    --h-emerald-50: #1A2418;  --h-emerald-100: #22301F;  --h-emerald-200: #30462C;  --h-emerald-300: #42613B;  --h-emerald-400: #5F8A55;
    --h-emerald-500: #6E9A62;  --h-emerald-600: #4C7A44;  --h-emerald-700: #8DBE84;  --h-emerald-800: #AED3A6;  --h-emerald-900: #CDE5C7;

    --rail-branch: #21090F;
    --rail-hq: #0F0C0A;
    --series-1: #CF5A70;
    --series-2: #B38533;
}

html { background: var(--h-page); }
body { font-feature-settings: 'cv11', 'ss01'; }

@layer base {
    h1, h2, h3, .font-display { font-family: var(--font-serif); font-optical-sizing: auto; letter-spacing: -0.01em; }
    ::selection { background: var(--h-gold-300); color: #1E1A17; }
}

@layer components {
    .card { @apply rounded-xl border border-slate-200 bg-white shadow-[0_1px_0_rgb(30_26_23/0.04),0_1px_2px_rgb(30_26_23/0.06)]; }
    .card-body { @apply p-4 sm:p-5; }
    .card-title { @apply font-serif text-[1.05rem] font-medium text-slate-900; }
    .page-title { @apply font-serif text-2xl font-normal tracking-tight text-slate-900 sm:text-[2rem]; }
    .muted { @apply text-sm text-slate-500; }
    /* Small-caps label: the "hymn number" voice of the system */
    .eyebrow { @apply text-[0.7rem] font-semibold tracking-[0.14em] text-slate-500 uppercase; }

    .btn { @apply inline-flex min-h-10 items-center justify-center gap-1.5 rounded-full border border-slate-300 bg-white px-4 py-2 text-sm font-semibold whitespace-nowrap text-slate-800 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-45; }
    .btn-primary { @apply border-brand-600 bg-brand-600 text-paper hover:border-brand-700 hover:bg-brand-700; }
    .btn-gold { @apply border-gold-500 bg-gold-500 text-[#1E1A17] hover:bg-gold-700 hover:text-white; }
    .btn-success { @apply border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700; }
    .btn-danger { @apply border-rose-600 bg-rose-600 text-white hover:bg-rose-700; }
    .btn-ghost { @apply border-transparent bg-transparent hover:bg-slate-100; }
    .btn-sm { @apply min-h-8 px-3 py-1 text-xs; }
    .link { @apply font-medium text-brand-500 underline decoration-1 underline-offset-[3px] hover:text-brand-600; }

    .label { @apply mb-1 block text-xs font-semibold text-slate-600; }
    .input { @apply block min-h-11 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:border-gold-500 focus:ring-3 focus:ring-gold-500/30 focus:outline-none; }
    .error { @apply mt-1 text-xs text-rose-600; }
    /* Hint text in boxes: solid mid-tone (Tailwind's default faint tint is hard to read). */
    .input::placeholder, textarea::placeholder, input::placeholder { color: var(--h-slate-500); opacity: 1; }

    .table { @apply w-full text-left text-sm; }
    .table th { @apply border-b border-slate-300 px-3 py-2 text-[0.68rem] font-semibold tracking-[0.12em] whitespace-nowrap text-slate-500 uppercase; }
    .table td { @apply border-b border-slate-200 px-3 py-2 align-top; }
    .table tr:hover td { @apply bg-gold-100/40; }
    .num { @apply text-right whitespace-nowrap tabular-nums; }
    /* Accounting convention: a single rule above a total, a double rule beneath it */
    .total-rule, .table tfoot td.num { border-top: 1px solid var(--h-slate-900); border-bottom: 3px double var(--h-slate-900); }

    .badge { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold; }
    .badge-gray { @apply bg-slate-100 text-slate-700; }
    .badge-green { @apply bg-emerald-100 text-emerald-700; }
    .badge-amber { @apply bg-amber-100 text-amber-700; }
    .badge-red { @apply bg-rose-100 text-rose-700; }
    .badge-violet { @apply bg-violet-100 text-violet-800; }   /* Headquarters adjusting entries (D-059) */
    .badge-blue { @apply bg-brand-100 text-brand-700; }

    /* "Posted" seal: a posted journal is final, so it is stamped rather than toggled */
    .seal { @apply inline-grid h-8 w-8 rotate-[-12deg] place-items-center rounded-full border-[1.5px] border-current text-[0.5rem] font-bold tracking-wider text-emerald-600 uppercase; box-shadow: inset 0 0 0 2px var(--h-white), inset 0 0 0 3px currentColor; }
}

@media print {
    .no-print { display: none !important; }
    html, body { background: white !important; }
    .card { box-shadow: none !important; border: none !important; }
}