// custom.scss: Bootstrap 5.3 held to DESIGN.md (Kiln).
// Part 1 sets Bootstrap's Sass variables from the tokens. Part 2 imports Bootstrap.
// Part 3 is the plain CSS for what no variable reaches.

// --- tokens, copied from DESIGN.md -------------------------------------
$t-primary: #963614;      $t-on-primary: #FFF6EC;
$t-secondary: #2A1D14;    $t-on-secondary: #FBF6EE;
$t-tertiary: #2F4A7A;     $t-on-tertiary: #FBF6EE;
$t-neutral: #6B5B4E;
$t-background: #F4ECE1;   $t-surface: #FBF6EE;
$t-foreground: #2A1D14;   $t-border: #DBCDBA;
$t-error: #B3122D;        $t-success: #2F6B3A;

// strict.modes.dark
$d-primary: #EC8B5E;      $d-on-primary: #2A1206;
$d-secondary: #F1E6D8;    $d-on-secondary: #2A1D14;
$d-tertiary: #9DB4E6;     $d-on-tertiary: #14203A;
$d-neutral: #B5A493;
$d-background: #1A130E;   $d-surface: #241A13;
$d-foreground: #F1E6D8;   $d-border: #3B2D22;
$d-error: #FF8E99;        $d-success: #7FC98A;

// --- 1. Bootstrap's variables ------------------------------------------

// Colors
$primary: $t-primary;
$secondary: $t-secondary;
$success: $t-success;
$danger: $t-error;
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "tertiary": $t-tertiary,
  "success": $success,
  "danger": $danger,
);
$min-contrast-ratio: 4.5;
$color-contrast-light: $t-on-primary;
$color-contrast-dark: $t-foreground;

$body-bg: $t-background;
$body-color: $t-foreground;
$body-emphasis-color: $t-foreground;
$body-secondary-color: $t-neutral;
$body-secondary-bg: $t-surface;
$body-tertiary-color: $t-neutral;
$body-tertiary-bg: $t-surface;
$border-color: $t-border;
$border-color-translucent: $t-border;
$link-color: $t-primary;
$link-hover-color: $t-foreground;
$link-shade-percentage: 0;
$component-active-bg: $t-primary;
$component-active-color: $t-on-primary;

// Dark mode: follow the browser's color scheme, and take the dark tokens
$color-mode-type: media-query;
$body-bg-dark: $d-background;
$body-color-dark: $d-foreground;
$body-emphasis-color-dark: $d-foreground;
$body-secondary-color-dark: $d-neutral;
$body-secondary-bg-dark: $d-surface;
$body-tertiary-color-dark: $d-neutral;
$body-tertiary-bg-dark: $d-surface;
$border-color-dark: $d-border;
$border-color-translucent-dark: $d-border;
$link-color-dark: $d-primary;
$link-hover-color-dark: $d-foreground;
$form-select-indicator-color-dark: $d-foreground;

// Fonts
$font-family-sans-serif: "DM Sans", system-ui, sans-serif;
$font-family-monospace: "DM Mono", ui-monospace, monospace;
$headings-font-family: "Bricolage Grotesque", system-ui, sans-serif;
$display-font-family: $headings-font-family;

// Type scale: 60, 38, 24, 16, 12px and nothing between
$enable-rfs: false;
$font-size-base: 1rem;
$font-size-sm: .75rem;
$font-size-lg: 1rem;
$line-height-base: 1.6;
$h1-font-size: 2.375rem;
$h2-font-size: 1.5rem;
$h3-font-size: 1.5rem;
$h4-font-size: 1rem;
$h5-font-size: 1rem;
$h6-font-size: 1rem;
$headings-font-weight: 700;
$headings-line-height: 1.1;
$display-font-sizes: (1: 3.75rem);
$display-font-weight: 700;
$display-line-height: 1;
$lead-font-size: 1rem;
$lead-font-weight: 400;
$small-font-size: .75rem;

// Spacing: 4, 8, 16, 24, 40, 80px
$spacer: 1rem;
$spacers: (
  0: 0,
  1: .25rem,
  2: .5rem,
  3: 1rem,
  4: 1.5rem,
  5: 2.5rem,
  6: 5rem,
);
// A gutter is split in half on each side of a column, so each value here is two steps
$gutters: (
  0: 0,
  1: .5rem,
  2: 1rem,
);
$grid-gutter-width: 1rem;
$container-padding-x: 3rem;
$paragraph-margin-bottom: 1rem;
$headings-margin-bottom: .5rem;

// Corners: 2, 4, 10px
$border-radius: 4px;
$border-radius-sm: 2px;
$border-radius-lg: 10px;
$border-radius-xl: 10px;
$border-radius-xxl: 10px;

// Flat: no shadows, no gradients
$enable-shadows: false;
$enable-gradients: false;
$gradient: none;
$box-shadow: none;
$box-shadow-sm: none;
$box-shadow-lg: none;
$box-shadow-inset: none;

// Focus ring: the primary color at 25%, 2px wide
$focus-ring-width: 2px;
$focus-ring-opacity: .25;
$focus-ring-color: rgba(var(--bs-primary-rgb), $focus-ring-opacity);

// Buttons: the label style, 8px by 16px
$btn-font-family: $font-family-monospace;
$btn-font-size: .75rem;
$btn-font-weight: 500;
$btn-line-height: 1.3;
$btn-padding-y: .5rem;
$btn-padding-x: 1rem;
$btn-padding-y-lg: .5rem;
$btn-padding-x-lg: 1.5rem;
$btn-font-size-lg: .75rem;
$btn-border-radius-lg: $border-radius;
$btn-hover-bg-shade-amount: 0%;
$btn-hover-bg-tint-amount: 0%;
$btn-hover-border-shade-amount: 0%;
$btn-hover-border-tint-amount: 0%;
$btn-active-bg-shade-amount: 0%;
$btn-active-bg-tint-amount: 0%;
$btn-active-border-shade-amount: 0%;
$btn-active-border-tint-amount: 0%;

// Fields
$input-padding-y: .5rem;
$input-padding-x: 1rem;
$input-bg: var(--bs-tertiary-bg);
$input-focus-border-color: var(--bs-primary);
$form-select-indicator-padding: 2.5rem;
$form-select-indicator-color: $t-foreground;
$form-label-margin-bottom: .25rem;
$form-text-margin-top: .25rem;
$form-check-padding-start: 1.5rem;
$form-check-margin-bottom: 0;

// Badges: the label style, 4px by 8px, 2px corners
$badge-font-size: .75rem;
$badge-font-weight: 500;
$badge-padding-y: .25rem;
$badge-padding-x: .5rem;
$badge-border-radius: $border-radius-sm;

// Cards: the lighter sheet, 24px padding, 10px corners
$card-bg: var(--bs-tertiary-bg);
$card-spacer-y: 1.5rem;
$card-spacer-x: 1.5rem;
$card-title-spacer-y: .5rem;
$card-border-radius: $border-radius-lg;

// Tables
$table-cell-padding-y: .5rem;
$table-cell-padding-x: .5rem;
$table-bg: transparent;

// Navbar
$navbar-padding-y: .5rem;
$navbar-brand-font-size: 1rem;
$navbar-brand-padding-y: .5rem;
$navbar-brand-margin-end: 1rem;
$navbar-nav-link-padding-x: .5rem;
$nav-link-padding-y: .5rem;
$nav-link-padding-x: 1rem;
$navbar-toggler-padding-y: .25rem;
$navbar-toggler-padding-x: .5rem;
$navbar-toggler-font-size: 1rem;

// --- 2. Bootstrap ---------------------------------------------------------
@import "bootstrap/scss/bootstrap";

// --- after bootstrap: 3. what no variable reaches -------------------------

@font-face { font-family: "DM Sans"; font-weight: 400; src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; src: url("fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; src: url("fonts/dm-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; src: url("fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; src: url("fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }

// 3a. Each type size is a whole style. Bootstrap has one weight and one line
// height for all headings, and no letter spacing anywhere.
h1, .h1 { letter-spacing: -.02em; }
h2, .h2, h3, .h3 { font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; line-height: $line-height-base; letter-spacing: 0; }
.display-1 { letter-spacing: -.03em; }
small, .small, .form-text, .btn, .badge {
  font-family: $font-family-monospace;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .04em;
}

// 3b. The checkbox is centered on the line by a sum: (1.6 - 1em) / 2 = 4.8px.
.form-check-input { margin-top: .25rem; }

// 3c. Fills and the text on them. Bootstrap picks the text on a fill with
// color-contrast(), from one light and one dark color. The spec names the
// text for each fill, and both change in dark mode.
$fills: (
  "primary":   ($t-primary,   $t-on-primary,   $d-primary,   $d-on-primary),
  "secondary": ($t-secondary, $t-on-secondary, $d-secondary, $d-on-secondary),
  "tertiary":  ($t-tertiary,  $t-on-tertiary,  $d-tertiary,  $d-on-tertiary),
);
// Colors with no on- color: for text and borders only.
$states: (
  "success": $d-success,
  "danger":  $d-error,
);

@mixin fill($name, $bg, $on) {
  .btn-#{$name} {
    @include button-variant($bg, $bg, $color: $on, $hover-background: $bg, $hover-border: $bg, $hover-color: $on,
      $active-background: $bg, $active-border: $bg, $active-color: $on, $disabled-color: $on);
  }
  .btn-outline-#{$name} {
    @include button-outline-variant($bg, $color-hover: $on, $active-color: $on);
  }
  .text-bg-#{$name} { color: $on !important; }
}

@each $name, $c in $fills {
  @include fill($name, nth($c, 1), nth($c, 2));
}

@include color-mode(dark, true) {
  @each $name, $c in $fills {
    --bs-#{$name}: #{nth($c, 3)};
    --bs-#{$name}-rgb: #{to-rgb(nth($c, 3))};
  }
  @each $name, $value in $states {
    --bs-#{$name}: #{$value};
    --bs-#{$name}-rgb: #{to-rgb($value)};
  }
}
@include color-mode(dark) {
  @each $name, $c in $fills {
    @include fill($name, nth($c, 3), nth($c, 4));
  }
}

// 3d. The focus ring of a button is mixed from its text and border colors.
// Take the primary color instead, at the opacity Bootstrap uses.
.btn { --bs-btn-focus-box-shadow: 0 0 0 #{$focus-ring-width} rgba(var(--bs-primary-rgb), .5); }