/* AwareIM login pages — design system stylesheet.
   Self-contained on purpose: no @import, no CDN. These pages must render
   correctly on an air-gapped install, so the design-system token values are
   copied here literally rather than importing DesignSystem/styles.css (whose
   fonts.css reaches out to Google Fonts).

   Source of truth: /Users/s/git/Claude/DesignSystem/tokens/
   If the design system's brand values change, re-sync the :root block below. */

/* ---------------------------------------------------------------- fonts -- */
/* Roboto variable. Two subsets, unicode-range values taken verbatim from
   Google's css2 output so the browser only fetches what a page actually needs.
   ponytail: latin + latin-ext only. A Cyrillic or Greek locale falls back to
   the system sans stack — add the matching subset here if that comes up. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  --aim-blue: #1F6495;
  --aim-blue-600: #195378;
  --aim-blue-light: #66BCE9;
  --aim-navy: #020E1E;
  --aim-navy-2: #101c2e;
  --aim-navy-3: #0a1626;
  --aim-navy-border: #2d3d52;

  --aim-white: #ffffff;
  --aim-gray-50: #f9fafb;
  --aim-gray-200: #e5e7eb;
  --aim-gray-300: #d1d5db;
  --aim-gray-500: #6b7280;
  --aim-gray-900: #111827;

  --aim-navy-fg: #f8fafc;
  --aim-navy-fg-3: #94a3b8;

  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-md: 6px;
  --radius-xl: 12px;
  --shadow-panel: 0 24px 60px -24px rgba(2, 14, 30, 0.45);
  --ring: 0 0 0 3px rgba(102, 188, 233, 0.45);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;

  --danger: #C0392B;
  --danger-bg: rgba(192, 57, 43, 0.10);
  /* The design system only defines the light danger red. On the navy form
     surface it measures 3.17:1, under the 4.5:1 AA floor, so dark gets a
     lightened red (6.2:1). Push this back into the design system if a dark
     status set is ever added there. */
  --aim-danger-dark: #F87171;

  /* Lets the browser theme its own native controls — checkbox, scrollbar,
     autofill. Cheaper and more correct than restyling them by hand. */
  color-scheme: light;

  /* Semantic aliases — these are what the layout rules below actually use,
     and they are the only things the dark theme remaps. */
  --surface-page: var(--aim-gray-50);
  --surface-form: var(--aim-white);
  --surface-input: var(--aim-white);
  --surface-pane: var(--aim-blue);
  --text-strong: var(--aim-gray-900);
  --text-muted: var(--aim-gray-500);
  --border-default: var(--aim-gray-300);
  --border-soft: var(--aim-gray-200);
  --link: var(--aim-blue);
  --shell-shadow: var(--shadow-panel);
  --shell-border: transparent;
}

/* ----------------------------------------------------------- dark theme -- */
/* Auto by OS preference, unless an explicit light override is set. The
   [data-theme="light"] rule inside the media query is what lets the toggle win
   back on a dark-set machine. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-page: var(--aim-navy);
    --surface-form: var(--aim-navy-2);
    --surface-input: var(--aim-navy-3);
    --surface-pane: var(--aim-blue-600);
    --text-strong: var(--aim-navy-fg);
    --text-muted: var(--aim-navy-fg-3);
    --border-default: var(--aim-navy-border);
    --border-soft: var(--aim-navy-border);
    --link: var(--aim-blue-light);
    --shell-shadow: none;
    --shell-border: var(--aim-navy-border);
    --danger: var(--aim-danger-dark);
    --danger-bg: rgba(248, 113, 113, 0.12);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: var(--aim-navy);
  --surface-form: var(--aim-navy-2);
  --surface-input: var(--aim-navy-3);
  --surface-pane: var(--aim-blue-600);
  --text-strong: var(--aim-navy-fg);
  --text-muted: var(--aim-navy-fg-3);
  --border-default: var(--aim-navy-border);
  --border-soft: var(--aim-navy-border);
  --link: var(--aim-blue-light);
  --shell-shadow: none;
  --shell-border: var(--aim-navy-border);
  --danger: var(--aim-danger-dark);
  --danger-bg: rgba(248, 113, 113, 0.12);
}

/* ----------------------------------------------------------------- page -- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body.aim-login {
  margin: 0;
  padding: 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  background: var(--surface-page);
  color: var(--text-strong);
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------- shell -- */
.aim-shell {
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: 280px 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-form);
  box-shadow: var(--shell-shadow);
  border: 1px solid var(--shell-border);
}

/* ----------------------------------------------------------------- pane -- */
.aim-pane {
  background: var(--surface-pane);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
}

/* The AwareIM wordmark SVG is two-tone brand blue and would disappear against
   the pane. Filtering to solid white beats shipping a second asset. */
.aim-pane-mark {
  height: 26px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* A customer's own logo renders as supplied — no filter. */
.aim-pane-logo {
  max-width: 100%;
  height: auto;
  display: block;
}

.aim-pane-headline {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
}

.aim-pane-sub {
  font-size: 13px;
  line-height: 1.5;
  /* 0.82 not 0.72: at 0.72 this blends to 4.15:1 on the blue pane, under the
     4.5:1 AA floor. 0.82 measures 4.85:1. */
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* ----------------------------------------------------------------- form -- */
.aim-form {
  padding: 40px 36px;
  background: var(--surface-form);
}

.aim-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--link);
  margin: 0 0 8px;
}

.aim-heading {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text-strong);
  margin: 0 0 28px;
}

.aim-field { margin-bottom: 16px; }

.aim-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.aim-field input[type="text"],
.aim-field input[type="password"] {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-strong);
  background: var(--surface-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.aim-field input:focus {
  border-color: var(--aim-blue-light);
  box-shadow: var(--ring);
}

/* -------------------------------------------------------------- checkbox -- */
.aim-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-muted);
}

.aim-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--aim-blue);
  margin: 0;
  flex: none;
}

.aim-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 3px;
}

/* ---------------------------------------------------------------- button -- */
.aim-btn {
  display: block;
  width: 100%;
  height: 42px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--aim-blue);
  border: 1px solid var(--aim-blue);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.aim-btn:hover { background: var(--aim-blue-600); border-color: var(--aim-blue-600); }
.aim-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.aim-btn:active { background: var(--aim-blue-600); }

/* ----------------------------------------------------------------- links -- */
.aim-foot {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
}

.aim-foot a {
  color: var(--link);
  text-decoration: none;
}

.aim-foot a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- error -- */
/* Server writes into #errorMsg. It stays in the DOM and empty on a clean load;
   .aim-error only paints once it has content, so no empty red box appears. */
.aim-error {
  font-size: 14px;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 20px;
}

.aim-error:empty { display: none; }

/* --------------------------------------------------------- theme toggle -- */
.aim-theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface-form);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  z-index: 10;
}

.aim-theme-toggle:hover { color: var(--text-strong); border-color: var(--border-default); }
.aim-theme-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.aim-theme-toggle svg { width: 17px; height: 17px; display: block; }

/* ------------------------------------------------------------ standalone -- */
/* logonDirect.html renders no shell — it auto-submits. This is only the
   message shown when that submit cannot happen. */
.aim-notice {
  max-width: 460px;
  padding: 28px 30px;
  background: var(--surface-form);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shell-shadow);
}

.aim-notice h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0 0 10px;
}

.aim-notice p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* ------------------------------------------------------------ responsive -- */
/* The pane collapses to a branding strip rather than disappearing. Hiding it
   outright left phone users with no AwareIM (or customer) mark anywhere on the
   page — the headline and sub-line are the parts that don't survive the width,
   not the logo. */
@media (max-width: 640px) {
  body.aim-login { padding: 0; align-items: stretch; }

  .aim-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }

  .aim-pane {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 24px;
    gap: 0;
  }

  .aim-pane-headline,
  .aim-pane-sub { display: none; }

  .aim-pane-mark { height: 22px; }
  .aim-pane-logo { max-height: 40px; width: auto !important; }

  .aim-form { padding: 32px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}