/* stylelint-disable */
@use "sailorcss" with (

   /*
   --------------------------------------------------------------------------
      PROJECT COLORS (added to root as CSS Variables)
   --------------------------------------------------------------------------
   */

   $s-colors: (
      "primary": #9085da,
      "white": #ffffff,
      "gray-light": #f1f5f8,
      "gray-medium": #c0c5c9,
      "gray-dark": #697084,
      "black": #111111,
      "text": hsl(240, 4%, 27%),
   ),


   /*
   --------------------------------------------------------------------------
      FONT-FAMILIES (added to root as CSS Variables)
   --------------------------------------------------------------------------
   */

   $s-font-families: (
      "ff-body": (Helvetica, arial, sans-serif),
      "ff-mono": (Menlo, Monaco, Consolas, Liberation Mono, monospace),
   ),


   /*
   --------------------------------------------------------------------------
      FONT-WEIGHTS (added to root as CSS Variables)
   --------------------------------------------------------------------------
   */

   $s-font-weights: (
      "fw-normal": normal,
      "fw-bold": bold,
      "fw-500": 500,
   ),


   /*
   --------------------------------------------------------------------------
      BREAKPOINTS
   --------------------------------------------------------------------------
   */

   $s-breakpoints: (
      "xs": 0,
      "sm": 576px,
      "md": 768px,
      "lg": 1024px,
      "xl": 1200px,
      "xxl": 1400px,
      "xxxl": 1600px,
   ),


   /*
   --------------------------------------------------------------------------
      RESPONSIVE CLASSES SEPARATOR
   --------------------------------------------------------------------------
   */

   $s-responsive-prefix-separator: ":",


   /*
   --------------------------------------------------------------------------
      SPACING BASE VALUES (added to root as CSS Variables)
   --------------------------------------------------------------------------
   */

   $s-spacing-values: (
      "xs": 5rem, 
      "md": 6rem, 
   ),


   /*
   --------------------------------------------------------------------------
      SPACING FRACTIONS
   --------------------------------------------------------------------------
   */

   $s-spacing-fractions: (
      "full": 1,
      "threequarter": 0.75,
      "twothird": 0.66,
      "half": 0.5,
      "third": 0.33,
      "quarter": 0.25,
      "sixth": 0.16,
      "none": 0,
   ),

   
   /*
   --------------------------------------------------------------------------
      BODY AND HTML FONT SIZE
   --------------------------------------------------------------------------
   */

   // added to root
   $s-body-size: (
      "xs": 1.25rem,
      "md": 1.14rem,
      "lg": 1.06rem,
      "xxxl": 1rem,
   ),

   // used for rem, these values allow a consistent result for each breakpoint
   $s-html-size: (
      "xs": 75%,
      "md": 87.5%,
      "lg": 100%,
      "xxxl": 112.5%,
   ),


   /*
   --------------------------------------------------------------------------
      GRID AND ROWS NUMBERS
   --------------------------------------------------------------------------
   */

   $s-grid-cols-number: 6,
   $s-grid-rows-number: 4,

      /*
   --------------------------------------------------------------------------
      CUSTOM CLASSES AND PROPERTIES
      Class x Property x Value
      Add yours or delete unused ones
   --------------------------------------------------------------------------
   */

   $s-custom-classes: (
      // grid flow
      "grid-flow-column": ( "grid-auto-flow": column ),
      "grid-flow-row": ( "grid-auto-flow": row ),
      // display
      "d-none": ("display": none),
      "d-block": ("display": block),
      "d-flex": ("display": flex),
      "d-inline-block": ("display": inline-block),
      "d-inline-flex": ("display": inline-flex),
      // position
      "p-relative": ("position": relative),
      "p-absolute": ("position": absolute),
      // flex-direction
      "direction-row": ("flex-direction": row),
      "direction-column": ("flex-direction": column),
      "direction-row-reverse": ("flex-direction": row-reverse),
      "direction-column-reverse": ("flex-direction": column-reverse),
      // flex justify content
      "justify-content-start": ("justify-content": flex-start),
      "justify-content-end": ("justify-content": flex-end),
      "justify-content-center": ("justify-content": center),
      "justify-content-between": ("justify-content": space-between),
      // align items
      "align-items-start": ("align-items": flex-start),
      "align-items-end": ("align-items": flex-end),
      "align-items-center": ("align-items": center),
      "align-items-stretch": ("align-items": stretch),
      // text 
      "text-left": ("text-align": left),
      "text-center": ("text-align": center),
      "text-right": ("text-align": right),
      "text-uppercase": ("text-transform": uppercase),
      // NEW aspect ratio
      // "aspect-ratio-1x1": ("aspect-ratio": "1/1"),
      // "aspect-ratio-4x3": ("aspect-ratio": "4/3"),
      // "aspect-ratio-16x9": ("aspect-ratio": "16/9"),
   ),
   
   

   /*
   --------------------------------------------------------------------------
      OLD RATIO WITH PADDING HACK
   --------------------------------------------------------------------------
   */

   $s-ratios: (
      "ratio-1x1": 1 1,
      "ratio-4x3": 4 3,
      "ratio-16x9": 16 9,
   ),

   /*
   --------------------------------------------------------------------------
      SCREEN READERS
   --------------------------------------------------------------------------
   */

   $s-screen-readers: (
      "normal-class": "sr-only",
      "focusable-class": "sr-only-focusable",
   ),

  
);
/* stylelint-enable */