/* shared/theme/branding/colors.css
   PowerGEM brand colors and dark mode support.

   Color palette source: PowerGEM Brand Guidelines
   Contrast ratios verified for WCAG 2.1 AA compliance:
   - Body text: 4.5:1 minimum
   - Large text: 3:1 minimum
*/

/* ============================================================
   CSS CUSTOM PROPERTIES - LIGHT MODE (default)
   ============================================================ */
:root {
    /* Brand Colors */
    --pg-green: #338956;
    --pg-dark-green: #12493c;
    --pg-darker-green: #0d3329;
    --pg-metallic-blue: #275a74;
    --pg-white: #ffffff;
    --pg-bright-gray: #eae9e9;
    --pg-black: #231f20;

    /* Neutral Grays */
    --pg-gray-600: #555555;
    --pg-gray-400: #999999;
    --pg-gray-200: #444444;
    --pg-gray-100: #666666;
    --pg-code-bg-light: #f5f5f5;

    /* Admonition Colors */
    --pg-warning: #ff9800;
    --pg-danger: #f44336;

    /* Material Theme Overrides */
    --md-primary-fg-color: var(--pg-dark-green);
    --md-primary-fg-color--light: var(--pg-green);
    --md-primary-fg-color--dark: var(--pg-darker-green);
    --md-accent-fg-color: var(--pg-green);

    /* Text Colors */
    --md-default-fg-color: var(--pg-black);
    --md-default-fg-color--light: var(--pg-gray-600);
    --md-default-fg-color--lighter: var(--pg-gray-400);

    /* Background Colors */
    --md-default-bg-color: var(--pg-white);
    --md-default-bg-color--light: var(--pg-bright-gray);

    /* Code Blocks */
    --md-code-bg-color: var(--pg-code-bg-light);
    --md-code-fg-color: var(--pg-black);

    /* Links */
    --md-typeset-a-color: var(--pg-dark-green);

    /* Admonitions */
    --md-admonition-bg-color: var(--pg-bright-gray);
}

/* ============================================================
   CSS CUSTOM PROPERTIES - DARK MODE
   Material uses [data-md-color-scheme="slate"]
   ============================================================ */
[data-md-color-scheme="slate"] {
    /* Dark Mode Specific Colors */
    --pg-green-dark-mode: #4a9e6e;
    --pg-green-light-dark-mode: #5cb87a;
    --pg-bg-dark: #111416;
    --pg-bg-dark-light: #1a2220;
    --pg-code-bg-dark: #171d1e;

    /* Dark Mode Text Opacity Levels */
    --pg-text-primary-dark: rgba(255, 255, 255, 0.87);
    --pg-text-secondary-dark: rgba(255, 255, 255, 0.54);
    --pg-text-disabled-dark: rgba(255, 255, 255, 0.32);

    /* Material Theme Overrides */
    --md-primary-fg-color: var(--pg-green-dark-mode);
    --md-primary-fg-color--light: var(--pg-green-light-dark-mode);
    --md-primary-fg-color--dark: var(--pg-dark-green);
    --md-accent-fg-color: var(--pg-green-light-dark-mode);

    /* Text Colors */
    --md-default-fg-color: var(--pg-text-primary-dark);
    --md-default-fg-color--light: var(--pg-text-secondary-dark);
    --md-default-fg-color--lighter: var(--pg-text-disabled-dark);

    /* Background Colors */
    --md-default-bg-color: var(--pg-bg-dark);
    --md-default-bg-color--light: var(--pg-bg-dark-light);

    /* Code Blocks */
    --md-code-bg-color: var(--pg-code-bg-dark);
    --md-code-fg-color: var(--pg-text-primary-dark);

    /* Links */
    --md-typeset-a-color: var(--pg-green-light-dark-mode);

    /* Admonitions */
    --md-admonition-bg-color: var(--pg-bg-dark-light);

    /* Mermaid diagrams: edge-label patch defaults to --md-default-bg-color,
       which is near-black in dark mode and reads as a harsh block behind
       line labels. Use the softer card background instead. */
    --md-mermaid-label-bg-color: var(--pg-bg-dark-light);
}

/* ============================================================
   HEADING COLORS
   ============================================================ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    color: var(--md-default-fg-color);
    font-weight: 600;
}