/* HeyJP identity for the server-rendered auth flow (OCT-650).
 *
 * Loaded after the chassis ``admin_saas/tenant_admin/auth.css``, which already
 * declares the token NAMES this file re-values (--color-*, --radius-*,
 * --shadow-*). So the work here is values plus a handful of ember-specific
 * shapes, not a second stylesheet.
 *
 * Values are ported verbatim from ``products/heyjp/frontend/src/index.css`` —
 * the "atelier du chauffagiste" parchment + ember palette. Keep the two in
 * step. Only the tokens the auth surface reads are ported; the SPA's flame
 * gradients, iron band and chat-specific tones stay where they are used.
 *
 * The SPA's contrast decisions come across with them, and they were measured:
 * --color-text-subtle is the 4.5:1 value from OCT-636, not the original
 * #9c8a77, because it carries 10-12px captions here too.
 */

/* ===== Parchment · light ================================================= */
:root {
  --color-canvas: #f6efe4;
  --color-surface: #fffdf8;
  --color-surface-muted: #f1e8d9;
  --color-surface-raised: #fffdf8;
  --color-surface-sunken: #ece0cd;

  --color-text: #2a2019;
  --color-text-muted: #6d5c4d;
  --color-text-subtle: #6d5f4f;

  --color-border: #e7dac6;
  --color-border-strong: #d7c4a8;

  /* Ember carries the primary action; the darker `ember-ink` carries anything
   * that has to read AS TEXT on parchment, where the fill tone is only 3.4:1. */
  --color-primary: #e4572e;
  --color-primary-contrast: #1a0f08;
  --color-accent: #b93d18;
  --color-accent-soft: #fbe6db;

  --color-danger: #b6362c;
  --color-danger-bg: #f8e0dc;
  --color-danger-line: color-mix(in srgb, #b6362c 30%, var(--color-surface));
  --color-success: #3a7347;
  --color-success-bg: color-mix(in srgb, #3a7347 12%, var(--color-surface));
  --color-success-line: color-mix(in srgb, #3a7347 30%, var(--color-surface));
  /* Brass is the seam's own caution tone — no separate warning hue exists. */
  --color-warning: #7f591e;
  --color-warning-bg: #f3e6c9;
  --color-warning-line: color-mix(in srgb, #7f591e 32%, var(--color-surface));
  --color-info: #6d5c4d;
  --color-info-bg: var(--color-surface-muted);
  --color-info-line: var(--color-border-strong);

  --shadow-raise: 0 1px 2px rgb(63 40 22 / 6%), 0 6px 18px -8px rgb(63 40 22 / 16%);
  --shadow-pop: 0 2px 6px rgb(63 40 22 / 8%), 0 16px 40px -18px rgb(63 40 22 / 28%);
  --shadow-lg: 0 2px 6px rgb(63 40 22 / 8%), 0 24px 60px -24px rgb(63 40 22 / 34%);
  --shadow-glow: 0 8px 30px -10px rgb(228 87 46 / 45%);

  /* The seam's tactile radii. The chassis collapses every radius alias onto the
   * 2px `--radius-1`; HeyJP's surfaces are considerably rounder. */
  --radius-3: 14px;
  --radius-4: 20px;

  --grad-flame: linear-gradient(135deg, #f2a33c 0%, #e4572e 52%, #c2371f 100%);
  --grad-ember-wash: radial-gradient(
    120% 90% at 50% -10%,
    rgb(242 163 60 / 22%) 0%,
    rgb(228 87 46 / 10%) 34%,
    transparent 68%
  );

  --font-display: 'Iowan Old Style', georgia, serif;
}

/* ===== Cast iron · dark ==================================================
 * Same mechanism as the chassis: the OS decides, nothing is stored, no script
 * runs. Both files' dark blocks are ``@media … { :root }`` at equal
 * specificity, and this one loads last. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #17120e;
    --color-surface: #211913;
    --color-surface-muted: #1c1510;
    --color-surface-raised: #241b14;
    --color-surface-sunken: #140f0b;

    --color-text: #f3e7d7;
    --color-text-muted: #b8a591;
    --color-text-subtle: #94826f;

    --color-border: #392b20;
    --color-border-strong: #4c3a2b;

    --color-primary: #f2703f;
    --color-primary-contrast: #1a0f08;
    --color-accent: #ffa270;
    --color-accent-soft: color-mix(in srgb, #f2703f 18%, var(--color-surface));

    --color-danger: #f08579;
    --color-danger-bg: #3a201d;
    --color-danger-line: color-mix(in srgb, #f08579 34%, var(--color-surface));
    --color-success: #7bbf8b;
    --color-success-bg: color-mix(in srgb, #7bbf8b 15%, var(--color-surface));
    --color-success-line: color-mix(in srgb, #7bbf8b 32%, var(--color-surface));
    --color-warning: #d8a54e;
    --color-warning-bg: color-mix(in srgb, #d8a54e 16%, var(--color-surface));
    --color-warning-line: color-mix(in srgb, #d8a54e 38%, var(--color-surface));
    --color-info: #b8a591;
    --color-info-bg: var(--color-surface-muted);
    --color-info-line: var(--color-border-strong);

    --shadow-raise: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 18px -8px rgb(0 0 0 / 60%);
    --shadow-pop: 0 2px 6px rgb(0 0 0 / 50%), 0 16px 40px -18px rgb(0 0 0 / 70%);
    --shadow-lg: 0 30px 80px rgb(0 0 0 / 70%), 0 10px 30px rgb(0 0 0 / 50%);
    --shadow-glow: 0 8px 34px -8px rgb(242 112 63 / 50%);

    --grad-ember-wash: radial-gradient(
      120% 90% at 50% -10%,
      rgb(242 112 63 / 24%) 0%,
      rgb(228 87 46 / 12%) 36%,
      transparent 70%
    );
  }
}

/* ===== The ember wash ====================================================
 * What makes the page read as Jean-Pierre's workshop rather than a card on
 * grey. Fixed, so it costs one paint and never moves with the card. */
/* The canvas rides on this element, not on `body`: the chassis paints the page
   from `body.app.is-auth`, and out-specifying it would be a fight for a surface
   that is already fully covered here. Same shape paraphe's aurora uses. */
.jp-auth .jp-auth-ember {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--color-canvas);
  background-image: var(--grad-ember-wash);
  background-repeat: no-repeat;
}

/* The card rides above the wash. */
.jp-auth .app-content {
  position: relative;
  z-index: 1;
}

/* ===== Surfaces — the seam's rounder, softer card ========================
 * ``.jp-auth`` is only ever added to a body that already carries ``is-auth``,
 * so these need to MATCH the chassis rules' specificity, not exceed it — this
 * file loads last and wins the tie. */
.jp-auth .auth-card {
  border-radius: var(--radius-4);
  border-color: var(--color-border);
  box-shadow: var(--shadow-lg);
}

/* The brand voice, as far as a server-rendered page can carry it: Fraunces
 * lives in the Vite bundle this surface never loads, so the heading takes the
 * same fallbacks Fraunces declares. */
.jp-auth .auth-card h1 {
  font-family: var(--font-display);
}

.jp-auth .form-field input,
.jp-auth .form-field select,
.jp-auth .form-field textarea {
  border-radius: var(--radius-3);
}
.jp-auth .form-field input:focus,
.jp-auth .form-field select:focus,
.jp-auth .form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

.jp-auth .btn,
.jp-auth .auth-button {
  border-radius: var(--radius-pill);
}
.jp-auth .btn:focus-visible {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}
.jp-auth .btn-primary,
.jp-auth .auth-button--sso {
  background: var(--grad-flame);
  border-color: transparent;
  color: var(--color-primary-contrast);
}
.jp-auth .btn-primary:hover,
.jp-auth .auth-button--sso:hover {
  background: var(--grad-flame);
  border-color: transparent;
  color: var(--color-primary-contrast);
  opacity: 1;
  filter: brightness(1.05);
}
/* The SSO glyph is a mask painted with the button's ink. */
.jp-auth .auth-button--sso::before {
  background: var(--color-primary-contrast);
}

.jp-auth .form-message,
.jp-auth .info-block,
.jp-auth .form-error-summary {
  border-radius: var(--radius-3);
}

/* ===== Brand lockup ====================================================== */
/* The flame beside the wordmark, mirroring the landing page's header
 * (Landing.tsx). The chassis owns the slot; what belongs here is the pairing —
 * a flex line, and the word in the seam's display voice. The flame's own
 * 26x26 is its size, so nothing here restates it. */
.jp-auth .auth-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 600;
}