/*
 * Theme "momentum-bronze" (contract W12.6, decision D18): the default theme of the web interface.
 *
 * This is the user's own design system "Momentum Design Bronze". The values are taken from the legacy token
 * file legacy/services/ocpp-edge-dashboard/html/static/css/momentum-tokens.css (light :root and the
 * [data-theme="dark"] block); nothing is imported from legacy/. The user confirmed its use on 2026-10-08 (D18).
 *
 * A theme file sets tokens only (and color-scheme), plus the @font-face rules of its own fonts:
 *   light: :root[data-theme-set="<name>"]
 *   dark:  @media (prefers-color-scheme: dark) { :root[data-theme-set="<name>"]:not([data-theme="light"]) }
 *          and :root[data-theme-set="<name>"][data-theme="dark"]  - both blocks identical (checked by a test)
 * Every name set here exists in tokens.css; names tokens.css does not know are not ported. Geometry
 * (layout, components) is shared by all themes; this file changes values only.
 *
 * The user's rules for this design (2026-10-09): no coloured accent border at the left of anything (a state
 * shows in its badge), the entries of a section in a side menu at the left, the header brand "Edge OCPP".
 *
 * Fonts (static/fonts, SIL OFL 1.1, unmodified copies, licence texts next to them): Inter and JetBrains Mono
 * (variable woff2) and Source Serif 4 at weight 500 (brand name and empty states only). The commercial
 * serif of the legacy stack is not shipped and left out of --font-family-serif.
 *
 * Deviations from the legacy values, for WCAG AA (computed with the formula of tests/ui/test_css.py):
 *   light:
 *     --color-text-tertiary   #656a74 instead of gray-500 (4.37:1 on gray-50, 3.98:1 on the bronze #f5efe4;
 *                             #656a74 gives 5.20:1 and 4.74:1)
 *     --input-border          gray-500 (4.56:1), hover gray-600, instead of gray-300 (1.44:1)
 *     --input-border-focus    brand-500 instead of brand-300
 *     --color-border-brand    brand-500 (4.95:1) instead of brand-300 (2.22:1)
 *     --color-border-error    error-500 instead of error-300
 *   dark:
 *     --input-border          gray-dark-500 (4.85:1 on gray-dark-900), hover gray-dark-400, instead of
 *                             gray-dark-700 (1.45:1)
 *     --color-border-brand    brand-400 (5.94:1) instead of rgba(17, 112, 207, 0.40) (1.55:1)
 *     --color-border-error    error-400 instead of rgba(219, 31, 46, 0.40)
 *     added, because the legacy dark block lacks them: --color-text-white, --button-error-* (error-500/600,
 *     fg #ffffff, 4.94:1) and --input-ring-focus.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../fonts/inter-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../../fonts/jetbrains-mono-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/source-serif-4-500.ttf") format("truetype");
}

:root[data-theme-set="momentum-bronze"] {
  color-scheme: light;

  /* ---------------------------------------------------------------- typography, radii, shadows, rings */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-family-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-family-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace;
  --leading-xs: 1.125rem;
  --leading-xl: 1.875rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0px 2px 4px rgba(16, 24, 40, 0.04), 0px 4px 8px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0px 4px 6px rgba(16, 24, 40, 0.02), 0px 12px 16px rgba(16, 24, 40, 0.06);
  --ring-brand: 0 0 0 4px rgba(17, 112, 207, 0.2);
  --ring-error: 0 0 0 4px rgba(219, 31, 46, 0.2);

  /* ---------------------------------------------------------------- primitives */
  --gray-25: #fdfdfd;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e9eaeb;
  --gray-300: #d5d7da;
  --gray-400: #a4a7ae;
  --gray-500: #717680;
  --gray-600: #535862;
  --gray-700: #414651;
  --gray-800: #252b37;
  --gray-900: #181d27;
  --gray-950: #0a0d12;

  --gray-dark-25: #fafafa;
  --gray-dark-50: #f5f5f6;
  --gray-dark-100: #f0f1f1;
  --gray-dark-200: #ececed;
  --gray-dark-300: #cecfd2;
  --gray-dark-400: #94969c;
  --gray-dark-500: #85888e;
  --gray-dark-600: #61646c;
  --gray-dark-700: #333741;
  --gray-dark-800: #1f242f;
  --gray-dark-900: #161b26;
  --gray-dark-950: #0c0e12;

  --brand-25: #f0f7ff;
  --brand-50: #dbf0ff;
  --brand-100: #bfe3ff;
  --brand-200: #8ecbff;
  --brand-300: #64b4fa;
  --brand-400: #3492eb;
  --brand-500: #1170cf;
  --brand-600: #0353a8;
  --brand-700: #063a75;
  --brand-800: #0a274a;
  --brand-900: #091b33;
  --brand-950: #060f1e;

  --error-25: #fffbfa;
  --error-50: #ffe8ea;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-400: #f55868;
  --error-500: #db1f2e;
  --error-600: #ab0a15;
  --error-700: #780d13;
  --error-800: #560d12;
  --error-900: #3d0a0e;
  --error-950: #2a0709;

  --warning-25: #fffcf5;
  --warning-50: #ffebc2;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-300: #fec84b;
  --warning-400: #fdb022;
  --warning-500: #a65e00;
  --warning-600: #7d4705;
  --warning-700: #5c3504;
  --warning-800: #432704;
  --warning-900: #301c03;
  --warning-950: #1f1202;

  --success-25: #f6fef9;
  --success-50: #cef5eb;
  --success-100: #d1fadf;
  --success-200: #a6f4c5;
  --success-300: #6ce9a6;
  --success-400: #32d583;
  --success-500: #1d805f;
  --success-600: #185e46;
  --success-700: #134231;
  --success-800: #0e3024;
  --success-900: #0a2119;
  --success-950: #071610;

  /* ---------------------------------------------------------------- semantics (light) */
  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary: #656a74; /* AA: legacy gray-500 */
  --color-text-disabled: var(--gray-400);
  --color-text-placeholder: var(--gray-400);
  --color-text-white: #ffffff;
  --color-text-error: var(--error-600);
  --color-text-warning: var(--warning-600);
  --color-text-success: var(--success-600);
  --color-text-brand-primary: var(--brand-600);

  --color-bg-primary: #ffffff;
  --color-bg-secondary: var(--gray-50);
  --color-bg-tertiary: var(--gray-100);
  --color-bg-quaternary: var(--gray-200);
  --color-bg-active: var(--gray-50);
  --color-bg-disabled: var(--gray-100);
  --color-bg-overlay: rgba(7, 16, 28, 0.4);
  --color-bg-brand-subtle: var(--brand-25);
  --color-bg-error-subtle: var(--error-25);
  --color-bg-warning-subtle: var(--warning-25);
  --color-bg-success-subtle: var(--success-25);
  --color-bg-gradient: linear-gradient(180deg, #f5efe4 0%, #ffffff 100%);
  --color-bg-glass: rgba(255, 255, 255, 0.82);

  --color-border-primary: var(--gray-300);
  --color-border-secondary: var(--gray-200);
  --color-border-error: var(--error-500); /* AA: legacy error-300 */
  --color-border-brand: var(--brand-500); /* AA: legacy brand-300 */

  --color-fg-primary: var(--gray-900);
  --color-fg-secondary: var(--gray-700);
  --color-fg-brand-primary: var(--brand-500);
  --color-fg-error-primary: var(--error-500);
  --color-fg-warning-primary: var(--warning-500);
  --color-fg-success-primary: var(--success-500);

  --button-primary-bg: rgba(0, 0, 0, 0.92);
  --button-primary-bg-hover: rgba(0, 0, 0, 0.78);
  --button-primary-fg: #ffffff;
  --button-primary-border: rgba(0, 0, 0, 0.92);
  --button-secondary-bg: #ffffff;
  --button-secondary-bg-hover: var(--gray-50);
  --button-secondary-fg: var(--gray-700);
  --button-secondary-border: var(--gray-300);
  --button-tertiary-bg: transparent;
  --button-tertiary-bg-hover: var(--gray-50);
  --button-tertiary-fg: var(--gray-600);
  --button-error-bg: var(--error-500);
  --button-error-bg-hover: var(--error-600);
  --button-error-fg: #ffffff;
  --button-error-border: var(--error-500);

  --input-bg: #ffffff;
  --input-border: var(--gray-500); /* AA: legacy gray-300 */
  --input-border-hover: var(--gray-600); /* AA: legacy gray-400 */
  --input-border-focus: var(--brand-500); /* AA: legacy brand-300 */
  --input-text: var(--gray-900);
  --input-placeholder: var(--gray-500);
  --input-ring-focus: var(--ring-brand);
  --input-disabled-bg: var(--gray-50);

  --badge-brand-bg: var(--brand-50);
  --badge-brand-fg: var(--brand-700);
  --badge-brand-border: var(--brand-200);
  --badge-gray-bg: var(--gray-50);
  --badge-gray-fg: var(--gray-700);
  --badge-gray-border: var(--gray-200);
  --badge-error-bg: var(--error-50);
  --badge-error-fg: var(--error-600);
  --badge-error-border: var(--error-200);
  --badge-warning-bg: var(--warning-50);
  --badge-warning-fg: var(--warning-600);
  --badge-warning-border: var(--warning-200);
  --badge-success-bg: var(--success-50);
  --badge-success-fg: var(--success-600);
  --badge-success-border: var(--success-200);

  --indicator-online: var(--success-500);
  --indicator-offline: var(--gray-300);

  /* ---------------------------------------------------------------- app frame */
  --pe-accent-bar: linear-gradient(90deg, #c49a6c, var(--brand-500) 50%, #c49a6c);
  --pe-header-backdrop: blur(20px) saturate(180%);
  /* the side menu lies on the same glass as the header (dark: the dark glass, resolved on :root) */
  --pe-surface-sidebar: var(--color-bg-glass);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme-set="momentum-bronze"]:not([data-theme="light"]) {
    color-scheme: dark;

    --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.16);
    --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.20), 0px 1px 3px rgba(0, 0, 0, 0.24);
    --shadow-md: 0px 2px 4px rgba(0, 0, 0, 0.20), 0px 4px 8px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0px 4px 6px rgba(0, 0, 0, 0.10), 0px 12px 16px rgba(0, 0, 0, 0.20);
    --ring-brand: 0px 0px 0px 4px rgba(52, 146, 235, 0.30);
    --ring-error: 0px 0px 0px 4px rgba(245, 88, 104, 0.30);

    --color-text-primary: var(--gray-dark-50);
    --color-text-secondary: var(--gray-dark-300);
    --color-text-tertiary: var(--gray-dark-400);
    --color-text-disabled: var(--gray-dark-600);
    --color-text-placeholder: var(--gray-dark-500);
    --color-text-white: #ffffff;
    --color-text-brand-primary: var(--brand-300);
    --color-text-error: var(--error-400);
    --color-text-warning: var(--warning-400);
    --color-text-success: var(--success-400);

    --color-bg-primary: var(--gray-dark-950);
    --color-bg-secondary: var(--gray-dark-900);
    --color-bg-tertiary: var(--gray-dark-800);
    --color-bg-quaternary: var(--gray-dark-700);
    --color-bg-active: var(--gray-dark-800);
    --color-bg-disabled: var(--gray-dark-800);
    --color-bg-overlay: rgba(0, 0, 0, 0.70);
    --color-bg-brand-subtle: rgba(17, 112, 207, 0.12);
    --color-bg-error-subtle: rgba(219, 31, 46, 0.12);
    --color-bg-warning-subtle: rgba(166, 94, 0, 0.12);
    --color-bg-success-subtle: rgba(29, 128, 95, 0.12);
    --color-bg-gradient: linear-gradient(180deg, #0c0e12 0%, #161b26 100%);
    --color-bg-glass: rgba(12, 14, 18, 0.82);

    --color-border-primary: var(--gray-dark-700);
    --color-border-secondary: var(--gray-dark-700);
    --color-border-brand: var(--brand-400);
    --color-border-error: var(--error-400);

    --color-fg-primary: var(--gray-dark-25);
    --color-fg-secondary: var(--gray-dark-200);
    --color-fg-brand-primary: var(--brand-300);
    --color-fg-error-primary: var(--error-400);
    --color-fg-warning-primary: var(--warning-400);
    --color-fg-success-primary: var(--success-400);

    --button-primary-bg: rgba(255, 255, 255, 0.92);
    --button-primary-bg-hover: rgba(255, 255, 255, 0.78);
    --button-primary-fg: #0c0e12;
    --button-primary-border: rgba(255, 255, 255, 0.92);
    --button-secondary-bg: var(--gray-dark-800);
    --button-secondary-bg-hover: var(--gray-dark-700);
    --button-secondary-fg: var(--gray-dark-200);
    --button-secondary-border: var(--gray-dark-700);
    --button-tertiary-bg: transparent;
    --button-tertiary-bg-hover: var(--gray-dark-800);
    --button-tertiary-fg: var(--gray-dark-300);
    --button-error-bg: var(--error-500);
    --button-error-bg-hover: var(--error-600);
    --button-error-fg: #ffffff;
    --button-error-border: var(--error-500);

    --input-bg: var(--gray-dark-900);
    --input-border: var(--gray-dark-500);
    --input-border-hover: var(--gray-dark-400);
    --input-border-focus: var(--brand-400);
    --input-text: var(--gray-dark-50);
    --input-placeholder: var(--gray-dark-500);
    --input-ring-focus: var(--ring-brand);
    --input-disabled-bg: var(--gray-dark-800);

    --badge-brand-bg: rgba(17, 112, 207, 0.15);
    --badge-brand-fg: var(--brand-200);
    --badge-brand-border: rgba(17, 112, 207, 0.30);
    --badge-gray-bg: var(--gray-dark-800);
    --badge-gray-fg: var(--gray-dark-300);
    --badge-gray-border: var(--gray-dark-700);
    --badge-error-bg: rgba(219, 31, 46, 0.15);
    --badge-error-fg: var(--error-300);
    --badge-error-border: rgba(219, 31, 46, 0.30);
    --badge-warning-bg: rgba(166, 94, 0, 0.15);
    --badge-warning-fg: var(--warning-300);
    --badge-warning-border: rgba(166, 94, 0, 0.30);
    --badge-success-bg: rgba(29, 128, 95, 0.15);
    --badge-success-fg: var(--success-300);
    --badge-success-border: rgba(29, 128, 95, 0.30);

    --indicator-online: var(--success-400);
    --indicator-offline: var(--gray-dark-600);
  }
}

:root[data-theme-set="momentum-bronze"][data-theme="dark"] {
  color-scheme: dark;

  --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.16);
  --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.20), 0px 1px 3px rgba(0, 0, 0, 0.24);
  --shadow-md: 0px 2px 4px rgba(0, 0, 0, 0.20), 0px 4px 8px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0px 4px 6px rgba(0, 0, 0, 0.10), 0px 12px 16px rgba(0, 0, 0, 0.20);
  --ring-brand: 0px 0px 0px 4px rgba(52, 146, 235, 0.30);
  --ring-error: 0px 0px 0px 4px rgba(245, 88, 104, 0.30);

  --color-text-primary: var(--gray-dark-50);
  --color-text-secondary: var(--gray-dark-300);
  --color-text-tertiary: var(--gray-dark-400);
  --color-text-disabled: var(--gray-dark-600);
  --color-text-placeholder: var(--gray-dark-500);
  --color-text-white: #ffffff;
  --color-text-brand-primary: var(--brand-300);
  --color-text-error: var(--error-400);
  --color-text-warning: var(--warning-400);
  --color-text-success: var(--success-400);

  --color-bg-primary: var(--gray-dark-950);
  --color-bg-secondary: var(--gray-dark-900);
  --color-bg-tertiary: var(--gray-dark-800);
  --color-bg-quaternary: var(--gray-dark-700);
  --color-bg-active: var(--gray-dark-800);
  --color-bg-disabled: var(--gray-dark-800);
  --color-bg-overlay: rgba(0, 0, 0, 0.70);
  --color-bg-brand-subtle: rgba(17, 112, 207, 0.12);
  --color-bg-error-subtle: rgba(219, 31, 46, 0.12);
  --color-bg-warning-subtle: rgba(166, 94, 0, 0.12);
  --color-bg-success-subtle: rgba(29, 128, 95, 0.12);
  --color-bg-gradient: linear-gradient(180deg, #0c0e12 0%, #161b26 100%);
  --color-bg-glass: rgba(12, 14, 18, 0.82);

  --color-border-primary: var(--gray-dark-700);
  --color-border-secondary: var(--gray-dark-700);
  --color-border-brand: var(--brand-400);
  --color-border-error: var(--error-400);

  --color-fg-primary: var(--gray-dark-25);
  --color-fg-secondary: var(--gray-dark-200);
  --color-fg-brand-primary: var(--brand-300);
  --color-fg-error-primary: var(--error-400);
  --color-fg-warning-primary: var(--warning-400);
  --color-fg-success-primary: var(--success-400);

  --button-primary-bg: rgba(255, 255, 255, 0.92);
  --button-primary-bg-hover: rgba(255, 255, 255, 0.78);
  --button-primary-fg: #0c0e12;
  --button-primary-border: rgba(255, 255, 255, 0.92);
  --button-secondary-bg: var(--gray-dark-800);
  --button-secondary-bg-hover: var(--gray-dark-700);
  --button-secondary-fg: var(--gray-dark-200);
  --button-secondary-border: var(--gray-dark-700);
  --button-tertiary-bg: transparent;
  --button-tertiary-bg-hover: var(--gray-dark-800);
  --button-tertiary-fg: var(--gray-dark-300);
  --button-error-bg: var(--error-500);
  --button-error-bg-hover: var(--error-600);
  --button-error-fg: #ffffff;
  --button-error-border: var(--error-500);

  --input-bg: var(--gray-dark-900);
  --input-border: var(--gray-dark-500);
  --input-border-hover: var(--gray-dark-400);
  --input-border-focus: var(--brand-400);
  --input-text: var(--gray-dark-50);
  --input-placeholder: var(--gray-dark-500);
  --input-ring-focus: var(--ring-brand);
  --input-disabled-bg: var(--gray-dark-800);

  --badge-brand-bg: rgba(17, 112, 207, 0.15);
  --badge-brand-fg: var(--brand-200);
  --badge-brand-border: rgba(17, 112, 207, 0.30);
  --badge-gray-bg: var(--gray-dark-800);
  --badge-gray-fg: var(--gray-dark-300);
  --badge-gray-border: var(--gray-dark-700);
  --badge-error-bg: rgba(219, 31, 46, 0.15);
  --badge-error-fg: var(--error-300);
  --badge-error-border: rgba(219, 31, 46, 0.30);
  --badge-warning-bg: rgba(166, 94, 0, 0.15);
  --badge-warning-fg: var(--warning-300);
  --badge-warning-border: rgba(166, 94, 0, 0.30);
  --badge-success-bg: rgba(29, 128, 95, 0.15);
  --badge-success-fg: var(--success-300);
  --badge-success-border: rgba(29, 128, 95, 0.30);

  --indicator-online: var(--success-400);
  --indicator-offline: var(--gray-dark-600);
}