/*
 * 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.
 */

/* ----------------------------------------------------------------------------
 * RosterGeek Styles
 * ---------------------------------------------------------------------------- */

/* Might need ☃
 * ---------------------------------------------------------------------------- */
@charset "UTF-8";

/* Reset All Browsers - https://csstools.github.io/normalize.css/
 * ---------------------------------------------------------------------------- */
/* @import "normalize.css"; */

/* Variable definition
 * ---------------------------------------------------------------------------- */

 :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);

  /* 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;

  --green: #219613;
  --yellow: #FFD700;
  --red: var(--color-primary);

  /* forcing the same for dark mode until we build it all out */
  @media (prefers-color-scheme: dark) {
    --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;
  
    --green: #219613;
    --yellow: #FFD700;
    --red: var(--color-primary);
  }

  --input-background: var(--gray-ghost);
  --input-border-color: var(--gray-400);
  --input-radius: 8px;
  --input-font-size: 20px;
  --input-inline-size: ;
  --input-block-size: ;
  --input-padding: 6px;

  --border-radius: 8px;
  --gap-size: 2em;
}

/* Fonts
 * ----------------------------------------------------------------------------
 * This app uses ATC Overlook, a font from Avondale Type Co. To use it, you must
 * have a license to do so.
 * https://avondaletypeco.com/atc-overlook/
 * ---------------------------------------------------------------------------- */
 
@font-face {
  font-family: 'ATC Overlook';
  src: font-url("/assets/overlook/woff2/ATCOverlook-Regular-3c890b73.woff2") format('woff2'),
      font-url("/assets/overlook/woff/ATCOverlook-Regular-729ad8ae.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ATC Overlook';
  src: font-url("/assets/overlook/woff2/ATCOverlook-RegularOblique-e94ff124.woff2") format('woff2'),
      font-url("/assets/overlook/woff/ATCOverlook-RegularOblique-420e5d5f.woff") format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'ATC Overlook';
  src: font-url("/assets/overlook/woff2/ATCOverlook-Bold-0a9891bc.woff2") format('woff2'),
      font-url("/assets/overlook/woff/ATCOverlook-Bold-0d4b1f1f.woff") format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'ATC Overlook';
  src: font-url("/assets/overlook/woff2/ATCOverlook-BoldOblique-0061abe4.woff2") format('woff2'),
      font-url("/assets/overlook/woff/ATCOverlook-BoldOblique-6f4cb2fd.woff") format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
    font-family: 'ATC Overlook';
    src: font-url("/assets/overlook/woff2/ATCOverlook-Black-805ed0a1.woff2") format('woff2'),
        font-url("/assets/overlook/woff/ATCOverlook-Black-77608c27.woff") format('woff');
    font-weight: 900;
    font-style: normal;
  }
  
@font-face {
    font-family: 'ATC Overlook';
    src: font-url("/assets/overlook/woff2/ATCOverlook-BlackOblique-6403b102.woff2") format('woff2'),
        font-url("/assets/overlook/woff/ATCOverlook-BlackOblique-78f14b06.woff") format('woff');
    font-weight: 900;
    font-style: italic;
   }

/* Components - mostly from CSS Zero https://github.com/lazaronixon/css-zero
 * Not called do to propshaft loading all the things independently
 * ---------------------------------------------------------------------------- */
/* @import "components/accordion.css";
@import "components/alert.css";
@import "components/avatar.css";
@import "components/badge.css";
@import "components/button.css";
@import "components/card.css";
@import "components/carousel.css";
@import "components/dialog.css";
@import "components/flash.css";
@import "components/input.css";
@import "components/menu.css";
@import "components/popover.css";
@import "components/switch.css";
@import "components/table.css";
@import "components/tabs.css";
@import "components/tooltip.css"; */

 /* Main Element Import
 * ---------------------------------------------------------------------------- */
/* @import "layout.css";
@import "base.css"; */