/*
 * Labiron brand: fonts and colours. The ONE source for the look of both projects:
 *   - the website (labiron.com): linked first in src/templates/base.html; the theme's own variables
 *     are mapped onto these in custom.css ("Brand mapping").
 *   - the ACAROS configurator (../machine-configuration): included in its build via angular.json
 *     "styles", and used by its Optimus UI theme (src/app/theme.ts) and styles.scss.
 * Change a brand colour or font here, rebuild (py build.py builds both), and both follow.
 */

/* Fonts: self-hosted variable fonts (one file per style covers all weights), Latin + Latin Extended.
   From @fontsource-variable/open-sans and @fontsource-variable/exo 5.3.0, SIL Open Font License
   (see ../fonts/OFL-*.txt). The browser only downloads the subsets a page actually uses. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url("../fonts/open-sans-latin-wght-normal.woff2") format("woff2-variations");
  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-display: swap;
  font-weight: 300 800;
  src: url("../fonts/open-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  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: italic;
  font-display: swap;
  font-weight: 300 800;
  src: url("../fonts/open-sans-latin-wght-italic.woff2") format("woff2-variations");
  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: italic;
  font-display: swap;
  font-weight: 300 800;
  src: url("../fonts/open-sans-latin-ext-wght-italic.woff2") format("woff2-variations");
  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: "Exo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/exo-latin-wght-normal.woff2") format("woff2-variations");
  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: "Exo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/exo-latin-ext-wght-normal.woff2") format("woff2-variations");
  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;
}

:root {
  /* Fonts */
  --brand-font-body: "Open Sans", Arial, sans-serif;  /* text, UI */
  --brand-font-heading: Exo, Arial, sans-serif;       /* headings, menu */

  /* Brand colours */
  --brand-teal: #00a29b;     /* primary: buttons, links, hover/active states */
  --brand-navy: #2c2f88;     /* secondary: headings, panel headers, link hover */
  --brand-text: #4a4a4a;     /* body text */
  --brand-bg: #ffffff;       /* page/section background */
  --brand-bg-alt: #f5f5f5;   /* alternate sections, cards, toolbars */
  --brand-navy-footer: #0c0e4a; /* footer band (the website's footer section; also the configurator's) */
  --brand-gradient: linear-gradient(135deg, var(--brand-teal), var(--brand-navy));
  --brand-gradient-reverse: linear-gradient(135deg, var(--brand-navy), var(--brand-teal));

  /* Shade scales (50 lightest … 950 darkest; 500 = the brand colour), for UI components that need
     hover/active/background tints. Mixed with white (50–400) or black (600–950). */
  --brand-teal-50: #f2fafa;  --brand-teal-100: #d9f1f0;  --brand-teal-200: #b2e3e1;
  --brand-teal-300: #80d0cd; --brand-teal-400: #40b9b4;  --brand-teal-500: var(--brand-teal);
  --brand-teal-600: #008a84; --brand-teal-700: #00716c;  --brand-teal-800: #005955;
  --brand-teal-900: #00413e; --brand-teal-950: #002827;

  --brand-navy-50: #f4f5f9;  --brand-navy-100: #dfe0ed;  --brand-navy-200: #c0c1db;
  --brand-navy-300: #9697c4; --brand-navy-400: #6163a6;  --brand-navy-500: var(--brand-navy);
  --brand-navy-600: #252874; --brand-navy-700: #1f215f;  --brand-navy-800: #181a4b;
  --brand-navy-900: #121336; --brand-navy-950: #0b0c22;
}