@use "sass:map";
@use "../base/colors" as *;

/*
  TODO: replace values with CSS variables/tokens:
    weight
    size
    line-height
    letter spacing

    Color can be rolled up into 1 selector
    Add default HTML elements too
*/

/* Includes "italic" */
$font-weights-roboto: (
  "thin": 100,
  "light": 300,
  "regular": 400,
  "medium": 500,
  "bold": 700,
  "black": 900
);

/* Includes italic */
$font-weight-roboto-mono: (
  "regular": 400,
  "bold": 700
);

.cbp-text-body {
  font-weight: var(--cbp-font-weight-regular);
  font-size: var(--cbp-font-size-body);
  line-height: var(--cbp-space-5x);
  max-width: var(--cbp-line-length-longer);
}

.cbp-text-button {
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

h1,
.cbp-heading-xxl {
  color: var(--cbp-color-text-darker);
  font-weight: 300; // light
  font-size: 2.027rem;
  line-height: var(--cbp-space-9x);
}

h2,
.cbp-heading-xl {
  color: var(--cbp-color-text-darker);
  font-weight: 400; // regular
  font-size: 1.802rem;
  line-height: var(--cbp-space-8x);
}

h3,
.cbp-heading-l {
  color: var(--cbp-color-text-darker);
  font-weight: 400; // regular
  font-size: 1.602rem;
  line-height: var(--cbp-space-7x);
}

h4,
.cbp-heading-m {
  color: var(--cbp-color-text-darker);
  font-weight: 500; // medium
  font-size: 1.424rem;
  line-height: var(--cbp-space-6x);
}

h5,
.cbp-heading-s {
  color: var(--cbp-color-text-darker);
  font-weight: 500; // medium
  font-size: 1.266rem;
  line-height: var(--cbp-space-6x);
}

h6,
.cbp-heading-xs {
  color: var(--cbp-color-text-darker);
  font-weight: 700; // bold
  font-size: 1rem;
  line-height: var(--cbp-space-5x);
}

.cbp-text-masthead-1 {
  font-weight: 100;
  size: 2.566rem;
  line-height: var(--cbp-space-11x);
  letter-spacing: 0.12;
  color: var(--cbp-color-text-darker);
}

.cbp-text-masthead-2 {
  font-weight: 100;
  size: 2.281rem;
  line-height: var(--cbp-space-10x);
  letter-spacing: 0.12;
  color: var(--cbp-color-text-darker);
}

.cbp-text-subhead {
  font-size: 0.889rem;
  font-weight: 500;
  line-height: var(--cbp-space-5x);
  letter-spacing: 0.05em;
}

[data-cbp-theme="dark"] {
  .cbp-text-body {
    color: var(--cbp-color-text-lightest);
  }
}