/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use 'sass:math';


//
// Colors
//

@forward './generated/colors_primitive.scss';
@forward './generated/colors_semantic.scss';


//
// Sizing
//

// Spacing variables. Mostly used for spacing between items, paddings, margins, etc.
// Reference: 1rem ~ 14px (at 1440px viewport width)
$spacing-1: round(math.div(4, 14) * 1rem, 1px) !default; // ~4px
$spacing-2: round(math.div(8, 14) * 1rem, 1px) !default; // ~8px
$spacing-3: round(math.div(12, 14) * 1rem, 1px) !default; // ~12px
$spacing-4: round(math.div(16, 14) * 1rem, 1px) !default; // ~16px
$spacing-5: round(math.div(18, 14) * 1rem, 1px) !default; // ~18px
$spacing-6: round(math.div(20, 14) * 1rem, 1px) !default; // ~20px
$spacing-7: round(math.div(24, 14) * 1rem, 1px) !default; // ~24px
$spacing-8: round(math.div(32, 14) * 1rem, 1px) !default; // ~32px
$spacing-9: round(math.div(40, 14) * 1rem, 1px) !default; // ~40px
$spacing-10: round(math.div(48, 14) * 1rem, 1px) !default; // ~48px
$spacing-11: round(math.div(64, 14) * 1rem, 1px) !default; // ~64px
$spacing-12: round(math.div(80, 14) * 1rem, 1px) !default; // ~80px
$spacing-13: round(math.div(96, 14) * 1rem, 1px) !default; // ~96px
$spacing-14: round(math.div(128, 14) * 1rem, 1px) !default; // ~128px
$spacing-15: round(math.div(160, 14) * 1rem, 1px) !default; // ~160px
$spacing-16: round(math.div(192, 14) * 1rem, 1px) !default; // ~192px
$spacing-17: round(math.div(224, 14) * 1rem, 1px) !default; // ~224px
$spacing-18: round(math.div(256, 14) * 1rem, 1px) !default; // ~256px

// These sizes do not match Figma variables
$size-hairline: math.div(1, 14) * 1rem !default; // ~1px
$size-1: math.div(1, 14) * 1rem !default; // ~1px
$size-2: math.div(2, 14) * 1rem !default; // ~2px
$size-3: math.div(3, 14) * 1rem !default; // ~3px


//
// Font families
//

$font-family-body: var(--bk-font-family-body) !default;
$font-family-display: var(--bk-font-family-display) !default;
$font-family-code: var(--bk-font-family-code) !default;

// Font weights
$font-weight-extra-light: 200 !default;
$font-weight-light: 300 !default;
$font-weight-regular: 400 !default; // Default font weight
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;


//
// Font sizes
//

$font-size-xs: math.div(10, 14) * 1rem !default; // ~10px
$font-size-s: math.div(12, 14) * 1rem !default; // ~12px
$font-size-m: math.div(14, 14) * 1rem !default; // ~14px
$font-size-l: math.div(16, 14) * 1rem !default; // ~16px
$font-size-xl: math.div(20, 14) * 1rem !default; // ~20px
$font-size-2xl: math.div(24, 14) * 1rem !default; // ~24px
$font-size-3xl: math.div(30, 14) * 1rem !default; // ~30px
$font-size-4xl: math.div(36, 14) * 1rem !default; // ~36px
$font-size-5xl: math.div(42, 14) * 1rem !default; // ~42px
$font-size-6xl: math.div(50, 14) * 1rem !default; // ~50px


//
// Line heights
//

$line-height-s: 1.4;
$line-height-m: 1.6; // Roughly corresponds to `normal` for many fonts


//
// Border radii
//

$border-radius-circle: 100% !default;
$border-radius-cap: 999px !default; // Cap the edges (i.e. as large of a radius as possible, without turning elliptical)

$radius-1: math.div(2, 14) * 1rem !default; // ~2px
$radius-2: math.div(4, 14) * 1rem !default; // ~4px
$radius-3: math.div(6, 14) * 1rem !default; // ~6px


//
// Z-Indexes
//

// FIXME: remove once date picker uses native HTML/CSS popover
$z-index-date-picker: 100;
