/* Paraphe identity for the server-rendered auth flow (OCT-672).
 *
 * Loaded after the chassis ``admin_saas/tenant_admin/auth.css``, which already
 * declares the token NAMES this file re-values (--color-*, --spacing-*,
 * --radius-*, --text-*, --shadow-*) — the same vocabulary the SPA uses. So the
 * work here is values and a handful of Aurore-specific shapes, not a second
 * stylesheet.
 *
 * Values are ported verbatim from ``products/paraphe/frontend/src/index.css``:
 * the Ardoise anchors, everything else derived with color-mix. Keep the two in
 * step. Only Ardoise is ported — the SPA's other four palettes need a signed-in
 * preference this surface deliberately doesn't read — and only the tokens the
 * auth surface reads; the categorical wheel, counter tones and triage aliases
 * stay in the SPA where they are used.
 *
 * This file supersedes the ``[data-shell="tenant"]`` overlay auth.css carried
 * until OCT-672. That one keyed Paraphe's look off *tenant-ness*, so a Havre
 * ATL operator's sign-in page came up in Paraphe indigo; identity keys off the
 * seam now, and the other seams fall back to the chassis neutral.
 */

/* ===== Ardoise · light =================================================== */
:root {
  --a1: #3f57c8;
  --a2: #5566d2;
  --a3: #8a7be6;
  --accent: #4257c4;
  --tint: #5d6a8a;

  --color-surface: color-mix(in srgb, var(--tint) 2%, #fff);
  --color-surface-muted: color-mix(in srgb, var(--tint) 6%, #f5f6fa);
  --color-surface-raised: #fff;
  --color-surface-sunken: color-mix(in srgb, var(--tint) 6%, #fff);
  --color-text: color-mix(in srgb, var(--tint) 20%, #161826);
  --color-text-muted: color-mix(in srgb, var(--tint) 18%, #565d70);
  --color-text-subtle: color-mix(in srgb, var(--tint) 15%, #8b91a4);
  --color-border: color-mix(in srgb, var(--tint) 15%, #e6e8ee);
  --color-border-strong: color-mix(in srgb, var(--tint) 24%, #d9dce4);
  --color-primary: var(--accent);
  --color-primary-contrast: #fff;
  --color-accent: var(--accent);
  --color-accent-soft: color-mix(in srgb, var(--accent) 11%, var(--color-surface));

  --color-danger: #d23667;
  --color-danger-bg: color-mix(in srgb, #f4527e 13%, var(--color-surface));
  --color-danger-line: color-mix(in srgb, #f4527e 30%, var(--color-surface));
  --color-success: #0c8f78;
  --color-success-bg: color-mix(in srgb, #16b598 14%, var(--color-surface));
  --color-success-line: color-mix(in srgb, #16b598 30%, var(--color-surface));
  --color-warning: #c2700a;
  --color-warning-bg: color-mix(in srgb, #f59e3c 16%, var(--color-surface));
  --color-warning-line: color-mix(in srgb, #f59e3c 40%, var(--color-surface));
  --color-info: #2f73d6;
  --color-info-bg: color-mix(in srgb, #2b87d6 13%, var(--color-surface));
  --color-info-line: color-mix(in srgb, #2b87d6 34%, var(--color-surface));

  --shadow-raise: 0 1px 2px rgb(30 25 60 / 6%), 0 2px 8px rgb(30 25 60 / 5%);
  --shadow-pop: 0 2px 4px rgb(40 30 80 / 7%), 0 8px 24px rgb(40 30 80 / 10%);
  --shadow-lg:
    0 28px 70px color-mix(in srgb, var(--accent) 22%, transparent),
    0 10px 26px rgb(40 30 80 / 12%);
  --shadow-glow: 0 12px 40px color-mix(in srgb, var(--accent) 30%, transparent);

  /* Aurore's generous radii. The chassis collapses every radius alias onto the
   * 2px ``--radius-1``; Paraphe's surfaces are rounder than that. */
  --radius-3: 12px;
  --radius-4: 18px;

  --grad-aurora: linear-gradient(115deg, var(--a1) 0%, var(--a2) 52%, var(--a3) 100%);
}

/* ===== Ardoise · 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 {
    --a1: #7b93ff;
    --a2: #93a0ff;
    --a3: #ada8ff;
    --accent: #8ea0ff;
    --tint: #6c7ea3;

    --color-surface: color-mix(in srgb, var(--tint) 12%, #14151d);
    --color-surface-muted: color-mix(in srgb, var(--tint) 10%, #0a0b12);
    --color-surface-raised: color-mix(in srgb, var(--tint) 14%, #191b24);
    --color-surface-sunken: color-mix(in srgb, var(--tint) 9%, #101119);
    --color-text: color-mix(in srgb, var(--tint) 6%, #f1edff);
    --color-text-muted: color-mix(in srgb, var(--tint) 14%, #b2acc8);
    --color-text-subtle: color-mix(in srgb, var(--tint) 16%, #76728e);
    --color-border: color-mix(in srgb, var(--tint) 22%, #2a2c38);
    --color-border-strong: color-mix(in srgb, var(--tint) 30%, #34374a);
    --color-primary-contrast: #0c0f15;
    --color-accent-soft: color-mix(in srgb, var(--accent) 18%, var(--color-surface));

    --color-danger: #ff7aa0;
    --color-danger-bg: color-mix(in srgb, #ff5a82 16%, var(--color-surface));
    --color-danger-line: color-mix(in srgb, #ff5a82 34%, var(--color-surface));
    --color-success: #4fe0c4;
    --color-success-bg: color-mix(in srgb, #28d2b4 15%, var(--color-surface));
    --color-success-line: color-mix(in srgb, #28d2b4 32%, var(--color-surface));
    --color-warning: #f6b25e;
    --color-warning-bg: color-mix(in srgb, #f59e3c 18%, var(--color-surface));
    --color-warning-line: color-mix(in srgb, #f59e3c 42%, var(--color-surface));
    --color-info: #74b0f5;
    --color-info-bg: color-mix(in srgb, #5096f0 18%, var(--color-surface));
    --color-info-line: color-mix(in srgb, #5096f0 40%, var(--color-surface));

    --shadow-raise: 0 1px 2px rgb(0 0 0 / 50%);
    --shadow-pop: 0 2px 4px rgb(0 0 0 / 40%), 0 10px 30px rgb(0 0 0 / 50%);
    --shadow-lg: 0 30px 80px rgb(0 0 0 / 70%), 0 10px 30px rgb(0 0 0 / 50%);
    --shadow-glow: 0 14px 50px color-mix(in srgb, var(--accent) 42%, transparent);
  }
}

/* ===== Aurora wash ======================================================= */
/* The two blurred blooms are what make the page read as Paraphe rather than as
 * a card on grey. Fixed, so it costs one paint and never moves with the card. */
.mb-auth .mb-auth-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      42rem 26rem at 12% -8%,
      color-mix(in srgb, var(--a1) 26%, transparent),
      transparent 70%
    ),
    radial-gradient(
      38rem 24rem at 96% 104%,
      color-mix(in srgb, var(--a3) 22%, transparent),
      transparent 70%
    );
}

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

/* ===== Surfaces — Aurore's rounder, softer card ==========================
 * ``.mb-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. */
.mb-auth .auth-card {
  border-radius: var(--radius-4);
  padding: var(--spacing-6);
  border-color: color-mix(in srgb, var(--accent) 14%, var(--color-border));
  box-shadow: var(--shadow-lg);
}

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

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

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