/*
 * Petroleum Office host-level CSS tokens.
 *
 * Lifted out of app.css :root block (#2204) for organizational clarity.
 * These vars drive the existing PO marketing/legacy CSS in app.css and
 * per-component <style> blocks; they are NOT the FluentUI design-token
 * primitive layer.
 *
 * The FluentUI design-token system (--accent-fill-*, --neutral-fill-*, etc.)
 * is the primitive layer for FluentUI components themselves — it is wired in
 * Program.cs (AddFluentUIComponents) and the FluentUI web-components script
 * in App.razor, and gets configured at the component layer in later phases.
 */

:root {
    /* Brand colors — single green palette (do not mix with Tailwind emerald/green) */
    --brand-50: #e8f5e9;
    --brand-100: #c8e6c9;
    --brand-200: #a5d6a7;
    --brand-300: #81c784;
    --brand-600: #217346;
    --brand-700: #1b5e3a;
    --brand-800: #14472d;
    --brand-900: #0d3320;
    --brand-950: #0a2618;

    /* Gray palette */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;

    /* Semantic aliases */
    --po-border: var(--gray-200);
    --po-background: var(--gray-50);
    --po-primary: var(--brand-600);
    --po-primary-dark: var(--brand-700);
    --po-text-primary: var(--gray-900);
    --po-text-secondary: var(--gray-500);
    --po-text-muted: var(--gray-400);
    --po-text-body: var(--gray-600);

    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    /* Box shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Container */
    --container-max-width: 80rem;
}