@use "sass:math";

// Variables
$color-schemes: false; // true/false, to enable/disable light/dark colour themes. All default styling is for 'light'

// Basis of sizes
$font-size--numeric: 18;
$font-size: 18px; //#{$font-size--numeric}px;
$container: 1080;

// Try to use rems for everything, including %s (besides for cols, and widths within rows)
// Rems function, circular @uses errors, so here for time being unless I make an intermediary file
@function rems($targetSize){
    $remSize: math.div($targetSize,$font-size);
    @return #{$remSize}rem; // e.g. 16/20px = 0.8rems
}
// Additional calc in numerics as SASS maths is jank with px,rems, etc...
@function remsNumeric($targetSize){
    $remSize: math.div($targetSize, $font-size--numeric);
    @return $remSize;
}
@function remsFromPercent($targetPercentage){
    $pixels: math.div($targetPercentage, 100)*$container;
    @return remsNumeric($pixels); // Then rem the pixel %
}

@function vws($targetSize){ // Maybe use, leaving for now
    // 100vw = 100% size of view. Calculations BASED on 1920
    $single: 1920/100; // 1vw = 19.2(px), use the largest of rems/vws
    // 8/18 = 0.44. May not be needed, could just max(0.44rem, 0.44vw) and that may work?
}

// Specific sizes for media query, prolly not going to use rems here
$media-xs: 360px;
$media-sm: 540px;
$media-md: 768px;
$media-lg: 1000px;
$media-xl: 1200px;

// Other variables, any sizes should be rems (use rems function, basic targetSize/fontSize)
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

$active-brightness: .85;
$hover-brightness: 1.2;

$border-radius: rems(8px);
$box-shadow: 0 rems(1px) rems(6px);

$justify-important: center;
$justify-normal: left;
$line-height: 1.5;
$width-content: #{remsNumeric($container)}rem;
$grid-gap--numeric: remsNumeric(15); // The gap between grid columns (15px = 7.5px either side)


// Colours
$color-primary: #118bee; $color-primary-dark: #0c5fa2;
$color-secondary: #a7e09a; $color-secondary--dark: #429b32;
$color-tertiary: #294fb7; $color-tertiary--dark: #114a70;
$color-background: #f8f9fa; $color-background--dark: #333;
$color-text: #1e1e1e; $color-text--dark: #f7f7f7;
$color-text-secondary: #868686; $color-text-secondary--dark: #555;
$color-link: #118bee; $color-link--dark: #007acb;
$color-success: #18ab34;
$color-fail: #e90d30;
$color-warning: #ddde11; 
$color-highlight: #ff8c00; $color-highlight--dark: #a3600d;

$color-accent: $color-text--dark; $color-accent--dark: $color-text;

// Z-indexes
$z-behind:  0;
$z-normal:  1;
$z-above:   10;
$z-top:     100;