/*
 * AWARE7 Corporate Design - Ueberschreibungen fuer die Account Console.
 * Erster Versuch, ANALOG zu login/resources/css/aware7.css (gleiche
 * --pf-v5-global--*-Tokens) - noch nicht visuell verifiziert, ob die
 * moderne (React-basierte) Account Console dieselbe PatternFly-Version /
 * denselben Custom-Property-Namensraum wie das Login-Theme nutzt. Siehe
 * docs/keycloak-kunden.md fuer den Verifizierungsstand.
 */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../font/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../font/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../font/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --a7-primary: #01A8B3;
  --a7-action-primary: #006E82;
  --a7-action-primary-hover: #005A6B;
  --a7-action-danger: #B4232C;
  --a7-action-danger-hover: #941B23;
  --a7-secondary: #107CAC;
  --a7-warning: #E54B4B;
  --a7-warning-hover: #C93F3F;
  --a7-green: #2EAE6A;
  --a7-text: #333333;
  --a7-text-light: #475569;
  --a7-neutral: #EFEFEF;
  --a7-bg-alt: #F8FAFC;
  --a7-white: #FFFFFF;
  --a7-ring: #E2E8F0;
  --a7-dark: #0F172A;
  --a7-dark-elevated: #1E293B;
  --a7-dark-border: #334155;
  --a7-mid-gray: #94A3B8;
  --a7-focus-ring: var(--a7-action-primary);

  --pf-v5-global--FontFamily--text: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", helvetica, arial, sans-serif;
  --pf-v5-global--FontFamily--heading: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", helvetica, arial, sans-serif;
  --pf-v5-global--FontFamily--monospace: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --pf-v5-global--BackgroundColor--100: var(--a7-white);
  --pf-v5-global--Color--100: var(--a7-text);
  --pf-v5-global--Color--200: var(--a7-text-light);
  --pf-v5-global--BorderColor--100: var(--a7-ring);

  --pf-v5-global--primary-color--100: var(--a7-action-primary);
  --pf-v5-global--primary-color--200: var(--a7-action-primary-hover);
  --pf-v5-global--primary-color--light-100: var(--a7-action-primary);
  --pf-v5-global--primary-color--dark-100: var(--a7-action-primary);

  --pf-v5-global--danger-color--100: var(--a7-action-danger);
  --pf-v5-global--danger-color--200: var(--a7-action-danger-hover);
  --pf-v5-global--success-color--100: var(--a7-green);
  --pf-v5-global--warning-color--100: var(--a7-warning);
  --pf-v5-global--warning-color--200: var(--a7-warning-hover);
  --pf-v5-global--info-color--100: var(--a7-secondary);

  --pf-v5-global--link--Color: var(--a7-action-primary);
  --pf-v5-global--link--Color--hover: var(--a7-action-primary-hover);

  --pf-v5-global--BorderRadius--sm: 4px;
}

.pf-v5-theme-dark {
  --pf-v5-global--BackgroundColor--100: var(--a7-dark-elevated);
  --pf-v5-global--BackgroundColor--150: var(--a7-dark-elevated);
  --pf-v5-global--Color--100: var(--a7-neutral);
  --pf-v5-global--Color--200: var(--a7-mid-gray);
  --pf-v5-global--BorderColor--100: var(--a7-dark-border);

  --pf-v5-global--primary-color--100: var(--a7-action-primary);
  --pf-v5-global--primary-color--200: var(--a7-action-primary-hover);

  --pf-v5-global--danger-color--100: var(--a7-action-danger);
  --pf-v5-global--danger-color--200: var(--a7-action-danger-hover);
  --pf-v5-global--success-color--100: var(--a7-green);
  --pf-v5-global--warning-color--100: var(--a7-warning);
  --pf-v5-global--info-color--100: var(--a7-primary);

  --pf-v5-global--link--Color: var(--a7-primary);
  --pf-v5-global--link--Color--hover: var(--a7-primary);

  --a7-focus-ring: var(--a7-primary);
}

body :focus-visible {
  outline: 2px solid var(--a7-focus-ring);
  outline-offset: 2px;
}