@use 'sass:map';
@use '@beeline/design-tokens/scss/tokens/globals';
@use '@beeline/design-tokens/scss/tokens/themes/light';
@use '@beeline/design-tokens/scss/tokens/components/button';

// Colors
$primary: globals.$color-background-brand;
$background: map.get(light.$theme, 'color-background-base');
$info: map.get(light.$theme, 'color-status-info');
$success: map.get(light.$theme, 'color-status-success');
$warning: map.get(light.$theme, 'color-status-warning');
$danger: map.get(light.$theme, 'color-status-error');

// Typography
$family-primary: globals.$font-family-text;
$title-color: map.get(light.$theme, 'color-text-active');
$subtitle-color: map.get(light.$theme, 'color-text-inactive');

// Radius
$radius: globals.$size-border-radius-x6;

// Buttons
$button-padding-vertical: globals.$size-spacing-x4;
$button-padding-horizontal: globals.$size-spacing-x5;
$button-background-color: button.$button-plain-background-color;
$button-focus-border-color: map.get(light.$theme, 'color-background-base-focused');
$button-disabled-opacity: button.$button-opacity-disabled;

// Box
$box-radius: $radius;
$box-shadow: globals.$elevation-low;
$box-padding: globals.$size-spacing-x6;
$box-link-hover-shadow: globals.$elevation-medium;
$box-link-active-shadow: globals.$elevation-medium;

// Form
$input-color: map.get(light.$theme, 'color-text-active');
$input-background-color: map.get(light.$theme, 'color-control-background');
$label-color: map.get(light.$theme, 'color-text-inactive');
$label-weight: globals.$font-weight-caption;

// Table
$table-color: map.get(light.$theme, 'color-text-active');
$table-background-color: map.get(light.$theme, 'color-background-base');
$table-cell-border: 1px solid map.get(light.$theme, 'color-control-background');
$table-cell-padding: 16px 16px;
$table-cell-heading-color: map.get(light.$theme, 'color-text-active');
$table-head-cell-border-width: 1px;

@import 'bulma/bulma';
@import 'overrides';