/*
 * Theme colors: the only place colors are defined.
 *
 * To re-theme the whole application, change the "Brand" values below.
 * Every lighter and darker shade is calculated from them automatically,
 * so buttons, links, the active menu item, highlights and printouts all follow.
 */
:root {
    /* ---- Brand: change these ---- */
    --primary: #16a34a;            /* buttons, active menu, highlights */
    --primary-contrast: #ffffff;   /* text/icons placed on the primary color */
    --secondary: #0f172a;          /* headings and main text (dark navy) */
    --secondary-contrast: #ffffff; /* text placed on the secondary color */

    /* ---- Page and text ---- */
    --surface: #ffffff;      /* cards, sidebar, header, inputs */
    --paper: #f8fafc;        /* page background */
    --ink: var(--secondary); /* main text */
    --muted: #64748b;        /* secondary text */
    --subtle: #94a3b8;       /* least important text, group labels */
    --line: #e8edf2;         /* borders and dividers */

    /* ---- Status (kept independent of the brand) ---- */
    --success-bg: #dcfce7;
    --success-ink: #15803d;
    --info-bg: #e8f0f8;
    --info-ink: #2d5a80;
    --info-line: #c4d6e8;
    --warning-bg: #fef3c7;
    --warning-ink: #b45309;
    --warning-line: #fcd34d;
    --danger: #dc2626;
    --danger-bg: #fee2e2;

    /* ---- Chart and figure-tile accents ---- */
    --accent-blue: #3b82f6;
    --accent-orange: #f59e0b;
    --accent-purple: #8b5cf6;
    --accent-red: #ef4444;
    --accent-pink: #ec4899;
    --accent-slate: #64748b;
    --accent-teal: #0d9488;

    /* ---- Shape ---- */
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 4px 16px color-mix(in srgb, var(--secondary) 4%, transparent);

    /* ---- Calculated shades: normally no need to edit below ---- */
    --primary-50: color-mix(in srgb, var(--primary) 6%, #fff);
    --primary-100: color-mix(in srgb, var(--primary) 12%, #fff);
    --primary-200: color-mix(in srgb, var(--primary) 24%, #fff);
    --primary-300: color-mix(in srgb, var(--primary) 45%, #fff);
    --primary-400: color-mix(in srgb, var(--primary) 72%, #fff);
    --primary-500: var(--primary);
    --primary-600: color-mix(in srgb, var(--primary) 85%, #000);
    --primary-700: color-mix(in srgb, var(--primary) 70%, #000);
    --primary-800: color-mix(in srgb, var(--primary) 55%, #000);
    --primary-900: color-mix(in srgb, var(--primary) 40%, #000);
    --primary-hover: var(--primary-600);
    --primary-text: var(--primary-700); /* primary used as text on light backgrounds (readable contrast) */
    --focus-ring: var(--primary-300);

    --gray-50: color-mix(in srgb, var(--paper) 60%, #fff);
    --gray-100: var(--paper);
    --gray-200: color-mix(in srgb, var(--line) 80%, var(--paper));
    --gray-300: var(--line);
    --gray-400: color-mix(in srgb, var(--muted) 45%, #fff);
    --gray-500: color-mix(in srgb, var(--muted) 75%, #fff);
    --gray-600: var(--muted);
    --gray-700: color-mix(in srgb, var(--muted) 55%, var(--ink));
    --gray-800: color-mix(in srgb, var(--muted) 25%, var(--ink));
    --gray-900: var(--ink);

    /* Sidebar (light) */
    --sidebar-bg: var(--surface);
    --sidebar-ink: color-mix(in srgb, var(--ink) 78%, var(--muted));
    --sidebar-icon: var(--muted);
    --sidebar-muted: var(--subtle);
    --sidebar-line: var(--line);
    --sidebar-hover: var(--primary-50);
    --sidebar-active-bg: color-mix(in srgb, var(--primary) 10%, #fff);
    --sidebar-active-line: color-mix(in srgb, var(--primary) 30%, #fff);
    --sidebar-active-ink: var(--primary-700);

    /* Older names still used by some screens. */
    --mint: var(--primary-300);
    --tone-done-bg: var(--success-bg);
    --tone-done-ink: var(--success-ink);
    --tone-info-bg: var(--info-bg);
    --tone-info-ink: var(--info-ink);
    --tone-attention-bg: var(--warning-bg);
    --tone-attention-ink: var(--warning-ink);
    --tone-neutral-bg: var(--gray-100);
    --tone-neutral-ink: var(--gray-600);

    --bs-body-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-link-color: var(--primary-text);
    --bs-link-hover-color: var(--primary-800);
}

/*
 * Dark theme. Chosen per device in the account menu (Light, Dark or System) and set on <html> before the page draws.
 * Only page, text, line and status colors change; the brand color stays, and shades are mixed with the dark surface
 * instead of white. Printed documents keep their own light styles.
 */
:root[data-theme="dark"] {
    color-scheme: dark;
    --surface: #131c2b;
    --paper: #0b1220;
    --ink: #e6ebf2;
    --muted: #9aa8bb;
    --subtle: #6f7e93;
    --line: #243246;

    --success-bg: color-mix(in srgb, #16a34a 22%, var(--surface));
    --success-ink: #6ee7a0;
    --info-bg: color-mix(in srgb, #3b82f6 20%, var(--surface));
    --info-ink: #9cc3f5;
    --info-line: color-mix(in srgb, #3b82f6 40%, var(--surface));
    --warning-bg: color-mix(in srgb, #f59e0b 20%, var(--surface));
    --warning-ink: #fcd34d;
    --warning-line: color-mix(in srgb, #f59e0b 45%, var(--surface));
    --danger: #f87171;
    --danger-bg: color-mix(in srgb, #dc2626 22%, var(--surface));

    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);

    --primary-50: color-mix(in srgb, var(--primary) 10%, var(--surface));
    --primary-100: color-mix(in srgb, var(--primary) 18%, var(--surface));
    --primary-200: color-mix(in srgb, var(--primary) 30%, var(--surface));
    --primary-300: color-mix(in srgb, var(--primary) 50%, var(--surface));
    --primary-400: color-mix(in srgb, var(--primary) 75%, var(--surface));
    --primary-text: color-mix(in srgb, var(--primary) 70%, #fff);
    --focus-ring: color-mix(in srgb, var(--primary) 55%, var(--surface));

    --gray-50: color-mix(in srgb, var(--surface) 70%, var(--paper));
    --gray-400: color-mix(in srgb, var(--muted) 55%, var(--surface));
    --gray-500: color-mix(in srgb, var(--muted) 80%, var(--surface));

    --sidebar-active-bg: color-mix(in srgb, var(--primary) 16%, var(--surface));
    --sidebar-active-line: color-mix(in srgb, var(--primary) 40%, var(--surface));
    --sidebar-active-ink: var(--primary-text);

    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--line);
    --bs-tertiary-bg: var(--gray-50);
    --bs-link-color: var(--primary-text);
    --bs-link-hover-color: color-mix(in srgb, var(--primary) 50%, #fff);
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}
:root[data-theme="dark"] img.doc-logo,
:root[data-theme="dark"] .sidebar-business-logo {
    background: #fff;
}
/* The sign-in story panel is always navy with light text and a light illustration: it keeps the light-theme shades. */
:root[data-theme="dark"] .login-story {
    --primary-50: color-mix(in srgb, var(--primary) 6%, #fff);
    --primary-100: color-mix(in srgb, var(--primary) 12%, #fff);
    --primary-200: color-mix(in srgb, var(--primary) 24%, #fff);
    --primary-300: color-mix(in srgb, var(--primary) 45%, #fff);
    --primary-400: color-mix(in srgb, var(--primary) 72%, #fff);
    --mint: color-mix(in srgb, var(--primary) 45%, #fff);
    --surface: #ffffff;
    --paper: #f8fafc;
    --line: #e8edf2;
    --ink: #0f172a;
    --muted: #64748b;
    --gray-300: #e8edf2;
    --gray-400: color-mix(in srgb, #64748b 45%, #fff);
    --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.04);
}