/*
 * Crane Tech theme in the style of Vuetify 3: Roboto, Material Symbols,
 * Vuetify's elevation shadows and type scale, and the brand palette (a
 * charcoal app bar with safety gold #dda924 for primary actions).
 *
 * Light by default; dark when <html data-theme="dark">, or when the device
 * prefers dark and the user hasn't picked light.
 */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/roboto-latin-400-normal-1ec7bce5.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/roboto-latin-500-normal-80162539.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/roboto-latin-700-normal-8202161f.woff2") format("woff2");
}

@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/material-symbols-outlined-345850c8.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --v-primary: #dda924;
  --v-on-primary: #1c1b1f;
  /* Gold dark enough to read as text on white (6:1). */
  --v-primary-text: #7a5900;
  --v-primary-tint: rgb(221 169 36 / 0.16);

  --v-background: #f5f5f5;
  --v-surface: #ffffff;
  --v-on-surface: rgb(0 0 0 / 0.87);
  --v-medium-emphasis: rgb(0 0 0 / 0.6);
  --v-disabled: rgb(0 0 0 / 0.38);
  --v-border: rgb(0 0 0 / 0.12);
  --v-outline: rgb(0 0 0 / 0.38);
  --v-hover: rgb(0 0 0 / 0.04);
  --v-pressed: rgb(0 0 0 / 0.1);
  /* Focused fields and checkboxes: neutral rather than gold. */
  --v-focus: #424242;

  --v-app-bar: #212121;
  --v-on-app-bar: #ffffff;

  --v-error: #b00020;
  --v-error-tint: rgb(176 0 32 / 0.1);
  --v-success: #2e7d32;
  --v-success-tint: rgb(46 125 50 / 0.12);
  --v-info: #1565c0;
  --v-info-tint: rgb(21 101 192 / 0.1);
  --v-warning-text: #8a4b00;
  --v-warning-tint: rgb(251 140 0 / 0.14);

  --v-snackbar: #333333;
  --v-on-snackbar: rgb(255 255 255 / 0.87);
  --v-snackbar-action: #dda924;

  --v-elevation-1: 0 2px 1px -1px rgb(0 0 0 / 0.2), 0 1px 1px 0 rgb(0 0 0 / 0.14), 0 1px 3px 0 rgb(0 0 0 / 0.12);
  --v-elevation-2: 0 3px 1px -2px rgb(0 0 0 / 0.2), 0 2px 2px 0 rgb(0 0 0 / 0.14), 0 1px 5px 0 rgb(0 0 0 / 0.12);
  --v-elevation-4: 0 2px 4px -1px rgb(0 0 0 / 0.2), 0 4px 5px 0 rgb(0 0 0 / 0.14), 0 1px 10px 0 rgb(0 0 0 / 0.12);
  --v-elevation-8: 0 5px 5px -3px rgb(0 0 0 / 0.2), 0 8px 10px 1px rgb(0 0 0 / 0.14), 0 3px 14px 2px rgb(0 0 0 / 0.12);
  --v-elevation-24: 0 11px 15px -7px rgb(0 0 0 / 0.2), 0 24px 38px 3px rgb(0 0 0 / 0.14), 0 9px 46px 8px rgb(0 0 0 / 0.12);

  --v-radius: 4px;
  --v-app-bar-height: 64px;
  --v-drawer-width: 256px;
}

/* The dark palette, applied by choice or by device preference. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --v-primary: #e9c16c;
  --v-on-primary: #1c1b1f;
  --v-primary-text: #e9c16c;
  --v-primary-tint: rgb(233 193 108 / 0.16);
  --v-background: #121212;
  --v-surface: #1e1e1e;
  --v-on-surface: rgb(255 255 255 / 0.87);
  --v-medium-emphasis: rgb(255 255 255 / 0.6);
  --v-disabled: rgb(255 255 255 / 0.38);
  --v-border: rgb(255 255 255 / 0.12);
  --v-outline: rgb(255 255 255 / 0.38);
  --v-hover: rgb(255 255 255 / 0.06);
  --v-pressed: rgb(255 255 255 / 0.12);
  --v-focus: rgb(255 255 255 / 0.87);
  --v-app-bar: #272727;
  --v-error: #f2777f;
  --v-error-tint: rgb(242 119 127 / 0.14);
  --v-success: #81c784;
  --v-success-tint: rgb(129 199 132 / 0.16);
  --v-info: #64b5f6;
  --v-info-tint: rgb(100 181 246 / 0.14);
  --v-warning-text: #ffb74d;
  --v-warning-tint: rgb(255 183 77 / 0.14);
  --v-snackbar: #e0e0e0;
  --v-on-snackbar: rgb(0 0 0 / 0.87);
  --v-snackbar-action: #7a5900;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --v-primary: #e9c16c;
    --v-on-primary: #1c1b1f;
    --v-primary-text: #e9c16c;
    --v-primary-tint: rgb(233 193 108 / 0.16);
    --v-background: #121212;
    --v-surface: #1e1e1e;
    --v-on-surface: rgb(255 255 255 / 0.87);
    --v-medium-emphasis: rgb(255 255 255 / 0.6);
    --v-disabled: rgb(255 255 255 / 0.38);
    --v-border: rgb(255 255 255 / 0.12);
    --v-outline: rgb(255 255 255 / 0.38);
    --v-hover: rgb(255 255 255 / 0.06);
    --v-pressed: rgb(255 255 255 / 0.12);
    --v-focus: rgb(255 255 255 / 0.87);
    --v-app-bar: #272727;
    --v-error: #f2777f;
    --v-error-tint: rgb(242 119 127 / 0.14);
    --v-success: #81c784;
    --v-success-tint: rgb(129 199 132 / 0.16);
    --v-info: #64b5f6;
    --v-info-tint: rgb(100 181 246 / 0.14);
    --v-warning-text: #ffb74d;
    --v-warning-tint: rgb(255 183 77 / 0.14);
    --v-snackbar: #e0e0e0;
    --v-on-snackbar: rgb(0 0 0 / 0.87);
    --v-snackbar-action: #7a5900;
  }
}

/* ---- Base ---------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.009375em;
  color: var(--v-on-surface);
  background-color: var(--v-background);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--v-primary-text);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

/* Material Symbols ligature icons: <i class="icon">search</i>. */
.icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  flex: none;
  user-select: none;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.icon--small { font-size: 20px; }
.icon--x-large { font-size: 48px; }

/* ---- Vuetify type scale -------------------------------------------- */

.text-h4 { font-size: 2.125rem; font-weight: 400; line-height: 2.5rem; letter-spacing: 0.0073529412em; }
.text-h5 { font-size: 1.5rem; font-weight: 400; line-height: 2rem; letter-spacing: normal; }
.text-h6 { font-size: 1.25rem; font-weight: 500; line-height: 2rem; letter-spacing: 0.0125em; }
.text-subtitle-1 { font-size: 1rem; font-weight: 400; line-height: 1.75rem; letter-spacing: 0.009375em; }
.text-subtitle-2 { font-size: 0.875rem; font-weight: 500; line-height: 1.375rem; letter-spacing: 0.0071428571em; }
.text-body-2 { font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; letter-spacing: 0.0178571429em; }
.text-caption { font-size: 0.75rem; font-weight: 400; line-height: 1.25rem; letter-spacing: 0.0333333333em; }
.text-overline { font-size: 0.75rem; font-weight: 500; line-height: 2rem; letter-spacing: 0.1666666667em; text-transform: uppercase; }

.text-medium-emphasis { color: var(--v-medium-emphasis); }
.text-primary { color: var(--v-primary-text); }
.text-error { color: var(--v-error); }
.text-success { color: var(--v-success); }
.text-disabled { color: var(--v-disabled, var(--v-medium-emphasis)); }
.text-no-wrap { white-space: nowrap; }
.text-center { text-align: center; }
.text-break { overflow-wrap: anywhere; }
.font-weight-medium { font-weight: 500; }