/* ============================================================
   ATM Machines brand system for the Employee Command Center.

   Every value here is carried over from the atmmachines.com website
   (site/src/styles/design-base.css + themes.css, approved option B:
   charcoal / gold / white). The website is the source of truth; if it
   changes, change it here too. Loaded after custom.css so the whole CRM
   can build on the same tokens and components.
   ============================================================ */

/* --- Fonts: self-hosted Barlow, same files as the website (SIL OFL 1.1,
       licences in /static/fonts/) --------------------------------------- */
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/static/fonts/barlow-sc-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  size-adjust: 96%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}

/* --- Tokens ---------------------------------------------------------- */
:root {
  /* Surfaces (website .pal-charcoal-gold) */
  --atm-bg:             #16181B;
  --atm-surface:        #1D2024;
  --atm-raised:         #25292E;
  --atm-divider:        #353A41;
  --atm-divider-strong: #6B727C;

  /* Text */
  --atm-text:           #F5F2EA;
  --atm-text-secondary: #CAC5BA;
  --atm-text-quiet:     #A9A398;

  /* Gold is the only accent. Buttons are dark text on gold. */
  --atm-accent:         #D1AE5E;   /* 8.4:1 on charcoal */
  --atm-btn-bg:         #C3A150;
  --atm-btn-text:       #16181B;
  --atm-btn-border:     #C3A150;
  --atm-btn-hover:      #D6B869;

  /* Interactive */
  --atm-field-border:   #6E7885;
  --atm-focus:          #F2D98F;
  --atm-danger:         #FF9F9B;
  --atm-ok:             #7FD8A4;

  /* The website hero's faint wash; the only "background treatment" it uses */
  --atm-glow:           rgb(195 161 80 / 0.07);
  --atm-glow-2:         rgb(255 255 255 / 0.035);

  /* Type */
  --atm-font-body:    'Barlow', 'Barlow Fallback', system-ui, sans-serif;
  --atm-font-display: 'Barlow Semi Condensed', 'Barlow', 'Barlow Fallback', system-ui, sans-serif;

  /* Shape, spacing, motion */
  --atm-radius: 6px;
  --atm-gutter: clamp(20px, 4vw, 64px);
  --atm-dur:    110ms;
  --atm-ease:   cubic-bezier(0.2, 0, 0.2, 1);

  /* Point the CRM's existing tokens at the website palette so screens that
     still use the old names (dashboard, tables, forms) inherit the brand. */
  --bg-primary:    var(--atm-bg);
  --bg-secondary:  var(--atm-surface);
  --bg-tertiary:   var(--atm-surface);
  --bg-card:       var(--atm-raised);
  --bg-card-hover: #2B3037;
  --bg-input:      var(--atm-surface);

  --gold:           var(--atm-accent);
  --gold-hover:     var(--atm-btn-hover);
  --gold-champagne: #F2D98F;
  --gold-bronze:    #AE8E42;
  --gold-tint:      rgb(209 174 94 / 0.10);
  --gold-glow:      rgb(209 174 94 / 0.18);

  --text-primary: var(--atm-text);
  --text-muted:   var(--atm-text-secondary);
  --text-subtle:  var(--atm-text-quiet);
  --text-inverse: var(--atm-bg);

  --border:       var(--atm-divider);
  --border-light: #2B3037;
  --border-gold:  rgb(209 174 94 / 0.35);

  --font-family: var(--atm-font-body);
  --radius-sm:   var(--atm-radius);
  --radius-md:   var(--atm-radius);
}

/* --- Components (mirror the website's .eyebrow, h1, .panel, .btn, .form,
       .note so later CRM screens can reuse them as-is) ----------------- */

.atm-eyebrow {
  margin: 0 0 14px;
  font-family: var(--atm-font-body);
  font-size: 14px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--atm-accent);
}

.atm-heading {
  margin: 0;
  font-family: var(--atm-font-display);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--atm-text);
  text-wrap: balance;
}

.atm-panel {
  background: var(--atm-surface);
  border: 1px solid var(--atm-divider);
  border-radius: var(--atm-radius);
  padding: clamp(22px, 2.4vw, 34px);
}

/* Fields: native controls, 48px targets, visible focus. The double class
   outranks custom.css's input[type=...] rules on purpose. */
.atm-field { margin-bottom: 18px; }
.atm-field label {
  display: block; margin-bottom: 6px;
  font-size: 16px; font-weight: 600; color: var(--atm-text);
}
.atm-form .atm-input {
  width: 100%; min-height: 48px;
  padding: 11px 13px;
  font: inherit; font-size: 17px; line-height: 1.4;
  color: var(--atm-text);
  background: var(--atm-raised);
  border: 1px solid var(--atm-field-border);
  border-radius: var(--atm-radius);
  box-shadow: none; outline: none;
  transition: border-color var(--atm-dur) var(--atm-ease);
}
.atm-form .atm-input:hover { border-color: var(--atm-text-quiet); box-shadow: none; }
.atm-form .atm-input:focus,
.atm-form .atm-input:focus-visible {
  border-color: var(--atm-accent);
  outline: 3px solid var(--atm-focus); outline-offset: 2px;
  box-shadow: none;
}
.atm-form .atm-input::placeholder { color: var(--atm-text-quiet); }
.atm-field__hint { margin: 6px 0 0; font-size: 15px; color: var(--atm-text-quiet); }

.atm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--atm-font-body); font-size: 17px; font-weight: 600; line-height: 1.2;
  border-radius: var(--atm-radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--atm-dur) var(--atm-ease),
              border-color var(--atm-dur) var(--atm-ease);
}
.atm-btn--primary { background: var(--atm-btn-bg); color: var(--atm-btn-text); border-color: var(--atm-btn-border); }
.atm-btn--primary:hover { background: var(--atm-btn-hover); }
.atm-btn--secondary { background: transparent; color: var(--atm-text); border-color: var(--atm-divider-strong); }
.atm-btn--secondary:hover { background: var(--atm-raised); border-color: var(--atm-text-quiet); }
.atm-btn--block { width: 100%; }
.atm-btn:focus-visible { outline: 3px solid var(--atm-focus); outline-offset: 3px; }
.atm-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.atm-note {
  border-left: 3px solid var(--atm-divider-strong);
  padding: 4px 0 4px 18px;
  font-size: 16px; line-height: 1.5;
  color: var(--atm-text-secondary);
}
.atm-note--accent { border-left-color: var(--atm-accent); }
.atm-note--danger { border-left-color: var(--atm-danger); }
.atm-note strong { color: var(--atm-text); font-weight: 600; }
.atm-note code {
  padding: 1px 5px; border-radius: 3px;
  background: var(--atm-raised); color: var(--atm-text);
  font-size: 0.9em;
}

.atm-link { color: var(--atm-text); text-decoration: underline; text-decoration-color: var(--atm-accent); text-underline-offset: 3px; }
.atm-link:hover { text-decoration-color: var(--atm-text); }

@media (prefers-reduced-motion: reduce) {
  .atm-btn, .atm-form .atm-input { transition-duration: 0.001ms; }
}