/* Application colour tokens for styles MudBlazor's palette does not cover (scoped CSS, inline
   styles, SVG fills). Light values equal the literals they replaced, so the light theme renders
   as it did before tokens existed. Dark values follow the Field app's dark palette
   (projekter-field-mobile androidApp theme/Tokens.kt, FieldColors.Dark).

   `pk-dark` is set on <html> by js/theme.js before Blazor starts, then kept in step by
   ProjekterThemeProvider. Prefer the --mud-palette-* variables where one exists: text-primary,
   text-secondary, surface, background, divider, error, primary. */

:root {
    color-scheme: light;

    /* Surfaces */
    --pk-drawer: #1A1A1A;
    --pk-rail: #111111;
    --pk-paper: #FFFFFF;              /* surfaces that must stay white in both themes (signature pad) */
    --pk-row-tint: rgba(0, 0, 0, 0.04);
    --pk-row-tint-strong: #FBFBF7;

    /* Lines */
    --pk-line: #E0E0E0;               /* card and panel edges */
    --pk-line-soft: #ECECEC;          /* nested rows inside a card */
    --pk-line-control: #D8D8D8;       /* pill and chip outlines; 3:1 against the surface in dark */

    /* Text */
    --pk-text-faint: #9E9E9E;
    --pk-accent-text: #B8960E;        /* gold used as text, outline or stroke */
    --pk-accent-text-strong: #7A6413; /* gold text on a gold tint */
    --pk-danger-text: #D32F2F;
    --pk-success-text: #2E7D32;

    /* Gold */
    --pk-gold: #DFBA38;
    --pk-gold-hover: #C29B22;
    --pk-on-gold: #1A1A1A;
    --pk-gold-tint: #FDF8E6;          /* hover or selected wash */
    --pk-gold-tint-border: #E8DCA8;
    --pk-gold-hover-fill: #F5E6AE;    /* SVG region hover */
    --pk-gold-selected-hover: #D0A92A;

    /* Ink: selected state of a pill or segment. Inverted in dark, because #1A1A1A on a #121212
       canvas measures 1.04:1. */
    --pk-ink-fill: #1A1A1A;
    --pk-on-ink: #FFFFFF;

    /* Danger fill: buttons and the quick-clock stop cap */
    --pk-danger-fill: #D32F2F;
    --pk-danger-fill-hover: #B71C1C;
    --pk-on-danger: #FFFFFF;

    /* Status washes, and the text that sits on them */
    --pk-warn-bg: #FFF9C4;
    --pk-text-muted: #4A4A4A;
    --pk-status-warn-bg: #FFF4E5;
    --pk-status-warn-text: #7A4100;
    --pk-status-danger-bg: #FDECEA;
    --pk-status-danger-text: #B71C1C;
    --pk-status-success-bg: #E8F5E9;
    --pk-status-success-text: #1B5E20;
    --pk-status-neutral-bg: #EEEEEE;
    --pk-status-neutral-text: #1A1A1A;

    /* App bar quick-clock tray */
    --pk-qc-tray: rgba(0, 0, 0, 0.045);
    --pk-qc-divider: rgba(0, 0, 0, 0.13);
    --pk-qc-text: #33302A;
    --pk-qc-time: #8A6C10;
    --pk-qc-pulse: #C29B22;
    --pk-qc-pulse-ring: rgba(194, 155, 34, 0.5);
    --pk-qc-pulse-ring-0: rgba(194, 155, 34, 0);
    --pk-qc-equip: #1976D2;
    --pk-qc-shadow: rgba(0, 0, 0, 0.14);

    /* Body map figure */
    --pk-figure-fill: #FFFFFF;
    --pk-figure-stroke: #1A1A1A;
    --pk-figure-detail: #2B2B2B;
    --pk-figure-overlay: rgba(26, 26, 26, 0.05);
    --pk-figure-overlay-stroke: rgba(26, 26, 26, 0.28);

    /* Estimate graph editor (Components/Estimation, css/estimate-graph.css). The node header uses
       --pk-ink-fill / --pk-on-ink; the kind tag on it is gold on ink in light, dark gold on the light
       ink of the dark theme (5.0:1 on #EDEAE2). */
    --pk-graph-canvas: #F4F3EE;
    --pk-graph-dot: #CFCBBF;
    --pk-graph-wire: #3D3D3D;
    --pk-graph-kind: #DFBA38;

    /* Node tones (Components/Estimation/NodeTones.cs): header fill, header title, header kind tag, body.
       Title on header is at least 8.3:1 and tag on header at least 4.6:1 in both themes. Output is a
       dark orange so it differs from the gold input in lightness (3.1:1), not only in hue. Headers keep
       one colour in both themes; only Calculation and the body washes change in dark. */
    --pk-tone-calculation-head: #FFFFFF;
    --pk-tone-calculation-title: #1A1A1A;
    --pk-tone-calculation-tag: #5C5C5C;
    --pk-tone-calculation-body: #FFFFFF;
    --pk-tone-input-head: #DFBA38;
    --pk-tone-input-title: #1A1A1A;
    --pk-tone-input-tag: #4A3B0A;
    --pk-tone-input-body: #FDF8E6;
    --pk-tone-data-head: #C8E6C9;
    --pk-tone-data-title: #1A1A1A;
    --pk-tone-data-tag: #1B5E20;
    --pk-tone-data-body: #F1F8F1;
    --pk-tone-module-head: #BBDEFB;
    --pk-tone-module-title: #0D2A4A;
    --pk-tone-module-tag: #0D47A1;
    --pk-tone-module-body: #EEF6FD;
    --pk-tone-output-head: #A8480C;
    --pk-tone-output-title: #FFFFFF;
    --pk-tone-output-tag: #FFE0C2;
    --pk-tone-output-body: #FFF1E6;
}

html.pk-dark {
    color-scheme: dark;

    --pk-drawer: #0D0D0D;
    --pk-rail: #0D0D0D;
    --pk-paper: #FFFFFF;
    --pk-row-tint: rgba(255, 255, 255, 0.05);
    --pk-row-tint-strong: #242424;

    --pk-line: #3A3A3A;
    --pk-line-soft: rgba(255, 255, 255, 0.10);
    --pk-line-control: #757575;

    --pk-text-faint: #8A8A8A;
    --pk-accent-text: #DFBA38;
    --pk-accent-text-strong: #DFBA38;
    --pk-danger-text: #F06A67;
    --pk-success-text: #66BB6A;

    --pk-gold: #DFBA38;
    --pk-gold-hover: #F0D76E;
    --pk-on-gold: #1A1A1A;
    --pk-gold-tint: rgba(223, 186, 56, 0.12);
    --pk-gold-tint-border: rgba(223, 186, 56, 0.35);
    --pk-gold-hover-fill: #6B5A1F;
    --pk-gold-selected-hover: #F0D76E;

    --pk-ink-fill: #EDEAE2;
    --pk-on-ink: #121212;

    /* Option B from the dark-theme canvas: #F06A67 with an ink label measures 5.77:1. White on
       #F06A67 measures 3.02:1. MudBlazor's Color.Error buttons use the same pair (PaletteDark). */
    --pk-danger-fill: #F06A67;
    --pk-danger-fill-hover: #F48A87;
    --pk-on-danger: #1A1A1A;

    --pk-warn-bg: #4A431F;
    --pk-text-muted: #A6A6A6;
    --pk-status-warn-bg: rgba(255, 183, 77, 0.14);
    --pk-status-warn-text: #FFB74D;
    --pk-status-danger-bg: rgba(240, 106, 103, 0.14);
    --pk-status-danger-text: #F06A67;
    --pk-status-success-bg: rgba(102, 187, 106, 0.14);
    --pk-status-success-text: #66BB6A;
    --pk-status-neutral-bg: #3A3A3A;
    --pk-status-neutral-text: #EDEAE2;

    /* Quick clock in dark: timer in full brand gold, equipment from blue to gold. */
    --pk-qc-tray: rgba(255, 255, 255, 0.06);
    --pk-qc-divider: rgba(255, 255, 255, 0.14);
    --pk-qc-text: #EDEAE2;
    --pk-qc-time: #DFBA38;
    --pk-qc-pulse: #DFBA38;
    --pk-qc-pulse-ring: rgba(223, 186, 56, 0.5);
    --pk-qc-pulse-ring-0: rgba(223, 186, 56, 0);
    --pk-qc-equip: #DFBA38;
    --pk-qc-shadow: rgba(0, 0, 0, 0.5);

    --pk-figure-fill: #2A2A2A;
    --pk-figure-stroke: #EDEAE2;
    --pk-figure-detail: #BDBDBD;
    --pk-figure-overlay: rgba(255, 255, 255, 0.06);
    --pk-figure-overlay-stroke: rgba(255, 255, 255, 0.35);

    --pk-graph-canvas: #181818;
    --pk-graph-dot: #3A3A3A;
    --pk-graph-wire: #BDBDBD;
    --pk-graph-kind: #7A6413;

    --pk-tone-calculation-head: #2C2C2C;
    --pk-tone-calculation-title: #EDEAE2;
    --pk-tone-calculation-tag: #BDBDBD;
    --pk-tone-calculation-body: var(--mud-palette-surface);
    /* Opaque mixes: a translucent body would show the wires drawn behind the node. */
    --pk-tone-input-body: color-mix(in srgb, #DFBA38 12%, var(--mud-palette-surface));
    --pk-tone-data-body: color-mix(in srgb, #C8E6C9 9%, var(--mud-palette-surface));
    --pk-tone-module-body: color-mix(in srgb, #BBDEFB 9%, var(--mud-palette-surface));
    --pk-tone-output-body: color-mix(in srgb, #A8480C 18%, var(--mud-palette-surface));
}

/* Boot screen and anything outside the Blazor root before MudBlazor's styles arrive. */
html, body {
    background: #F5F5F5;
}

html.pk-dark,
html.pk-dark body {
    background: #121212;
}