/* --------------------------------------------------------------------
  CNSA.FR STYLEGUIDE
  CSS Custom Properties
  Le Studio, 2023
/*-------------------------------------------------------------------- */

@font-face {
  font-family: "Cabin";
  src: url("Cabin-VariableFont_wdth,wght.ttf");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  unicode-range: U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
      U+01A0-01A1, U+01AF-01B0, U+01C4-01CC, U+01E6-01E7, U+01EA-01EB,
      U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+02BB-02BC,
      U+02BE-02BF, U+02C6-02CC, U+02D8-02DD, U+0300-0304, U+0306-030C,
      U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331,
      U+0335, U+03C0, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D,
      U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37,
      U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69,
      U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93,
      U+1E97, U+1E9E, U+1EA0-1EF9, U+2007-200B, U+2010, U+2012-2015,
      U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033,
      U+2039-203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20A1,
      U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB-20AD, U+20B1-20B2, U+20B5,
      U+20B9-20BA, U+20BC-20BD, U+2113, U+2116, U+2122, U+2126, U+212E,
      U+2202, U+2205-2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
      U+222B, U+2248, U+2260, U+2264-2265, U+25CA;
}

@font-face {
  font-family: "Montserrat";
  src: url("Montserrat-VariableFont_wght.ttf");
  font-weight: 100 900;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+018F, U+0192,
      U+01A0-01A1, U+01AF-01B0, U+01B7, U+01C4-01CE, U+01D3-01D4,
      U+01E4-01EB, U+01EE-01EF, U+01FA-021B, U+021E-021F, U+022A-022D,
      U+0230-0233, U+0237, U+0259, U+0292, U+02B9-02BC, U+02BE-02BF,
      U+02C6-02CC, U+02D8-02DD, U+0300-0304, U+0306-030C, U+030F,
      U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331,
      U+0335-0338, U+0394, U+03A9, U+03BC, U+03C0, U+0400-045F, U+0462-0463,
      U+046A-046B, U+0472-0475, U+048A-04C4, U+04C6-04FF, U+0510-0513,
      U+051A-051D, U+0524-0529, U+052E-052F, U+1E08-1E09, U+1E0C-1E0F,
      U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B,
      U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53,
      U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85,
      U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EA0-1EF9, U+2007-200B,
      U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
      U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+2070, U+2074-2079,
      U+2080-2089, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB-20AE,
      U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+2113, U+2116,
      U+2122, U+2126, U+212A-212B, U+212E, U+2153-2154, U+215B-215E,
      U+2190-2199, U+2202, U+2205-2206, U+220F, U+2211-2212, U+2215,
      U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25A0-25A1,
      U+25B2-25B3, U+25B6-25B7, U+25BC-25BD, U+25C0-25C1, U+25C6-25C7,
      U+25CA, U+27E8-27E9, U+A78B-A78C, U+FB01-FB02;
}

:root {
  --main-color: #657A2C;
  --main-dark: #366100;
  --main-darkest: #222F16;
  --main-light: #E3E95D;
  --main-lightest: #EAEEB6;
  --main-high: #D3D80E;

  --transparent: rgba(255,255,255,0);
  --body-bg: #FFF;
  --body-text: #353635;
  --text-inv: #FFF;

  --interaction-color: #540ABD;
  --interaction-visited: #634A8C;
  --interaction-color-light: #EDE4FA;
  --focus-color: var(--interaction-color);

  --n-main: #B5C9CD;
  --n-main-light: #E2E8E4;
  --n-main-dark: #8A8C8A;
  --n-u-light: #F7F7F7;
  --n-light: #E7E7E7;
  --n-medium-light: #D7D7D7;
  --n-medium: #CECECE;
  --n-medium-dark: #727272;
  --n-dark: #353635;
  --n-u-dark: #000;

  --color-highlight: var(--main-light);
  --color-highlight-light: var(--main-lightest);

  --alert-success: #058849;
  --alert-neutral: #8A8C8A;
  --alert-warning: #FFC043;
  --alert-danger: #DD1708;

  --button-primary: var(--interaction-color);
  --button-secondary: var(--interaction-color-light);
  --button-hover: color-mix(in srgb, var(--interaction-color), black 30%);

  --input-border: #8A8C8A;
  --input-background: #F7F7F7;
  --input-background-layer: #FFF;

  --radius: 0.25rem;
  --radius-4: 0.5rem;
  --radius-32: 2rem;

  --stack-h: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --stack: "Cabin", Calibri, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Stack-h weight won't go further than 700 */
  --fvs-black: "wght" 900;
  --fvs-extrabold: "wght" 800;
  --fvs-bold: "wght" 700;
  --fvs-semibold: "wght" 600;
  --fvs-medium: "wght" 500;
  --fvs-regular: "wght" 400;
  --fvs-light: "wght" 300;
  --fvs-extralight: "wght" 200;

  --check-shape: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='1' width='17' height='17' rx='5.5' stroke='%23454745'/%3E%3C/svg%3E ");
  --check-shape-hover: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='1' width='17' height='17' rx='5.5' stroke='%23540ABD'/%3E%3C/svg%3E ");
  --check-shape-on: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 0.5C2.68629 0.5 0 3.18629 0 6.5V12.5C0 15.8137 2.68629 18.5 6 18.5H12C15.3137 18.5 18 15.8137 18 12.5V6.5C18 3.18629 15.3137 0.5 12 0.5H6ZM14.7807 5.22003C14.488 4.92694 14.0131 4.92661 13.72 5.21931L6.74869 12.1811L4.2888 9.64072C4.00066 9.34315 3.52585 9.3355 3.22828 9.62364C2.93071 9.91178 2.92306 10.3866 3.2112 10.6842L6.20092 13.7717C6.49221 14.0725 6.97339 14.0766 7.26968 13.7807L14.78 6.28069C15.0731 5.988 15.0734 5.51313 14.7807 5.22003Z' fill='%23540ABD'/%3E%3C/svg%3E ");

  --radio-shape: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='10' stroke='%23454745' stroke-width='2'/%3E%3C/svg%3E ");
  --radio-shape-hover: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='10' stroke='%23454745' stroke-width='2' stroke-color='%23540ABD' /%3E%3C/svg%3E ");
  --radio-shape-on: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='10' stroke='%23540ABD' stroke-width='2'/%3E%3Ccircle cx='11' cy='11' r='6' fill='%23540ABD'/%3E%3C/svg%3E ");

  --cnsa-ds-tab-font: 1em/1.3 var(--stack);
  --cnsa-ds-tab-font-active-tab: 800 1em/1.3 var(--stack);
  --cnsa-ds-focus-ring: 2px solid var(--interaction-color);
}