/*
 * Begra house style: the ONE source of the brand, neutral, status and tone colour tokens and of the Open Sans font.
 * Source file: src/Shared/Branding/css/begra-tokens.css. The office app (MontagePlanner.App) and the Api (monteur PWA) both serve it as
 * /css/begra-tokens.css through an MSBuild link (see both csproj files) - never copy it into a wwwroot.
 *
 * Light values live in :root. Dark values are declared twice with identical contents (guarded by BrandingTokensTests):
 * - the office app switches theme with [data-theme="dark"] on <html> (it always sets data-theme);
 * - the PWA has no theme switch and follows the OS; ":root:not([data-theme])" keeps the OS preference from overriding the theme a user
 *   chose in the office app.
 * App-specific tokens (sidebar, chat, focus rings, ...) stay in each app's own stylesheet, which must not redeclare a token from this file
 * in the same theme (BrandingTokensTests). A colour change here also needs a new PWA cache version (monteur-shell-vNN in sw.js).
 */

/* Open Sans, SIL Open Font License 1.1 (../fonts/OFL.txt), from @fontsource/open-sans 5.3.0: latin + latin-ext (Polish, Czech), 400/600/700. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/open-sans-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/open-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/open-sans-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/open-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/open-sans-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/open-sans-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root {
  /* Brand: royal blue exactly as on begra.nl (logo fill #005CB9). */
  --begra-primary:#005CB9;
  --begra-primary-dark:#003E80;
  --begra-primary-light:#E5F0FA;
  /* Primary blue as TEXT/icon (links, secondary buttons); --begra-primary stays for surfaces and borders. */
  --begra-primary-text:var(--begra-primary);
  --begra-blue:#005CB9;

  /* Neutrals. */
  --begra-dark:#1A1A1A;
  --begra-gray-900:#333;
  --begra-gray-600:#666;
  --begra-gray-500:#6B7280;
  --begra-gray-400:#999;
  --begra-gray-300:#CCC;
  --begra-gray-200:#E5E5E5;
  --begra-gray-100:#F5F5F5;
  --begra-white:#FFF;

  /* Semantic colours. */
  --begra-red:#E53935;
  --begra-orange:#F58220;
  --begra-success:#00A651;       /* semantic green, equal to --status-6 */

  /* Status colours per ProjectStatus enum value (ARCHITECTURE.md §26.2). Statuses 2 and 3 no longer exist (merged into 4).
     -bg/-fg: surfaces with text (badges, active tabs, StatusFlow numbers) reach >=4.5:1; s5/s6/s8 are darker than the base colour,
     s7/s9/s10 get dark text, s11 (Verwijderd, brown) reaches 7.6:1 with white. -dot: the vivid base colour for marks without text. */
  --status-1:#005CB9; --status-4:#7B1FA2; --status-5:#0288D1; --status-6:#00A651; --status-7:#66BB6A;
  --status-8:#E53935; --status-9:#9E9E9E; --status-10:#FFB300; --status-11:#6D4C41;
  --status-1-bg:#005CB9; --status-1-fg:#fff; --status-1-dot:var(--status-1);
  --status-4-bg:#7B1FA2; --status-4-fg:#fff; --status-4-dot:var(--status-4);
  --status-5-bg:#026FAD; --status-5-fg:#fff; --status-5-dot:var(--status-5);
  --status-6-bg:#00753A; --status-6-fg:#fff; --status-6-dot:var(--status-6);
  --status-7-bg:#66BB6A; --status-7-fg:#1A1A1A; --status-7-dot:var(--status-7);
  --status-8-bg:#B71C1C; --status-8-fg:#fff; --status-8-dot:var(--status-8);
  --status-9-bg:#9E9E9E; --status-9-fg:#1A1A1A; --status-9-dot:var(--status-9);
  --status-10-bg:#FFB300; --status-10-fg:#1A1A1A; --status-10-dot:var(--status-10);
  --status-11-bg:#6D4C41; --status-11-fg:#fff; --status-11-dot:var(--status-11);

  /* Tone tokens for soft badges/pills (fg/bg >=4.5:1 in both themes). */
  --tone-success-bg:#E6F4EA; --tone-success-fg:#1E6B34;
  --tone-warning-bg:#FFF3CD; --tone-warning-fg:#7A5B00;
  --tone-danger-bg:#FDECEA;  --tone-danger-fg:#B3261E;
  --tone-info-bg:#E5F0FA;    --tone-info-fg:#003E80;
  --tone-neutral-bg:var(--begra-gray-200); --tone-neutral-fg:var(--begra-gray-900);
  --tone-accent-bg:#EDE9FE;  --tone-accent-fg:#5B21B6;   /* category colour (violet), not a status */
}

/* Dark theme of the office app. Keep identical to the block below. */
[data-theme="dark"] {
  --begra-gray-100:#0A0A0A;      /* page background */
  --begra-white:#141414;         /* card background */
  --begra-gray-200:#262626;      /* borders */
  --begra-gray-300:#404040;      /* heavier borders */
  --begra-gray-500:#9CA3AF;      /* secondary/muted text */
  --begra-gray-600:#9CA3AF;      /* muted text */
  --begra-gray-900:#E5E5E5;      /* heading text */
  --begra-dark:#E5E5E5;          /* body text */
  --begra-primary-text:#60A5FA;  /* 7.25:1 on the card background */
  --begra-success:#66BB6A;       /* readable green on a dark background */
  /* Dots/bars without text need >=3:1 on #141414; these three did not reach it (2.8/2.3/2.4:1). */
  --status-1-dot:#2680D8; --status-4-dot:#A24CC8; --status-11-dot:#8D6E63;
  /* Transparent tint + light text (>=7:1 on the card #141414). Neutral inherits the greys. */
  --tone-success-bg:rgba(102,187,106,.18); --tone-success-fg:#86EFAC;
  --tone-warning-bg:rgba(234,179,8,.18);   --tone-warning-fg:#FDE68A;
  --tone-danger-bg:rgba(248,113,113,.16);  --tone-danger-fg:#FCA5A5;
  --tone-info-bg:rgba(96,165,250,.16);     --tone-info-fg:#93C5FD;
  --tone-accent-bg:rgba(167,139,250,.18);  --tone-accent-fg:#C4B5FD;
}

/* Dark theme of the monteur PWA (follows the OS). Keep identical to the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --begra-gray-100:#0A0A0A;      /* page background */
    --begra-white:#141414;         /* card background */
    --begra-gray-200:#262626;      /* borders */
    --begra-gray-300:#404040;      /* heavier borders */
    --begra-gray-500:#9CA3AF;      /* secondary/muted text */
    --begra-gray-600:#9CA3AF;      /* muted text */
    --begra-gray-900:#E5E5E5;      /* heading text */
    --begra-dark:#E5E5E5;          /* body text */
    --begra-primary-text:#60A5FA;  /* 7.25:1 on the card background */
    --begra-success:#66BB6A;       /* readable green on a dark background */
    /* Dots/bars without text need >=3:1 on #141414; these three did not reach it (2.8/2.3/2.4:1). */
    --status-1-dot:#2680D8; --status-4-dot:#A24CC8; --status-11-dot:#8D6E63;
    /* Transparent tint + light text (>=7:1 on the card #141414). Neutral inherits the greys. */
    --tone-success-bg:rgba(102,187,106,.18); --tone-success-fg:#86EFAC;
    --tone-warning-bg:rgba(234,179,8,.18);   --tone-warning-fg:#FDE68A;
    --tone-danger-bg:rgba(248,113,113,.16);  --tone-danger-fg:#FCA5A5;
    --tone-info-bg:rgba(96,165,250,.16);     --tone-info-fg:#93C5FD;
    --tone-accent-bg:rgba(167,139,250,.18);  --tone-accent-fg:#C4B5FD;
  }
}