/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *
 *= require_self
 *= require base
 *= require layout
 *= require events
 *= require publications
 *= require modal
 *= require memberships
 *= require foundation
 *= require mobile
 */

/* Variables */

:root {
  /* Abstractions */
  --color-bg: white;
  --color-text: black;
  --color-text-reversed: white;
  --color-text-subtle: var(--zinc-500);
  --color-link: var(--blue-700);
  --color-border-light: var(--zinc-100);
  --color-border: var(--zinc-200);
  --color-border-dark: var(--zinc-400);
  --color-selected: var(--blue-100);
  --color-selected-dark: var(--blue-300);
  --color-highlight: var(--yellow-200);

  /* New Brand Colors */
  --color-brand-red: #7c2629;
  --color-brand-orange: #fa4616;
  --color-brand-blue: #002d72;
  --color-brand-skyblue: #0090da;
  --color-brand-red-reverse: #93282c;
  --color-brand-orange-reverse: #fc4c02;
  --color-brand-blue-reverse: #0857c3;
  --color-brand-skyblue-reverse: #00a9e0;
  --color-brand-scgreen: #02403d;
  --color-brand-scyellow: #c2e808;

  --color-brand-scyellow-screen: #f5fbd9;
  --color-brand-scyellow-darkscreen: #e4eeb1;
  --color-brand-orange-screen: #f9dfd7;
  --color-brand-blue-screen: #f3f5f7;

  /* Gradient */
  --brand-gradient: linear-gradient(
    90deg,
    rgba(255, 59, 63, 1) 0%,
    rgba(106, 13, 173, 1) 35%,
    rgba(167, 139, 250, 1) 76%
  );

  /* Accent colors */
  --color-primary: #e93325;
  --color-primary-dark: #c72114;
  --color-primary-light: #eb493c;
  /* --color-secondary: var(--zinc-100);
  --color-negative: var(--red-600);
  --color-positive: var(--green-600); */

  /* SVG color values */
  --color-filter-text: invert(0);
  --color-filter-text-reversed: invert(1);
  --color-filter-negative: invert(22%) sepia(85%) saturate(1790%)
    hue-rotate(339deg) brightness(105%) contrast(108%);
  --color-filter-positive: invert(44%) sepia(89%) saturate(409%)
    hue-rotate(89deg) brightness(94%) contrast(97%);

  /* Gray palette */
  /* --gray-100: #1D1C1C;
  --gray-200: #2A2828;
  --gray-300: #373535;
  --gray-400: #5E5B5B;
  --gray-500: #787474;
  --gray-600: #9E9A9A;
  --gray-700: #C3C1C1;
  --gray-800: #DCDBDB;
  --gray-900: #E9E8E8;
  --gray-ghost: #f5f5f5; */

  --headline-one: 3rem;
  --headline-two: 2.5rem;
  --headline-three: 1.5rem;
}

/* Fonts
 * ----------------------------------------------------------------------------
 * This app uses Archivo from Google Fonts. They are included via the
 * application.html.erb header includes.
 * ---------------------------------------------------------------------------- */

/* .archivo-<uniquifier> {
   font-family: "Archivo", sans-serif;
   font-optical-sizing: auto;
   font-weight: <weight>;
   font-style: normal;
   font-variation-settings:
     "wdth" 100;
 } */