/* Feedback identity for the server-rendered auth flow (OCT-322).
 *
 * Loaded after the chassis ``admin_saas/tenant_admin/auth.css``, which already
 * declares the token NAMES this file re-values. So the work here is values plus
 * the two shapes Feedback rounds differently, not a second stylesheet.
 *
 * Values are ported verbatim from ``products/feedback/frontend/src/index.css``
 * — the same five tokens the marketing page and the customer app are built
 * from. Keep the three in step.
 *
 * The page reads as the landing page does, which inverts the usual auth shell:
 * the CANVAS is white and the CARD is the tinted surface, because that is the
 * pairing every card on the one-pager uses (`bg-surface` on `bg-canvas`). The
 * chassis paints the page from ``--color-surface-muted`` and the card from
 * ``--color-surface-raised``, so the two tokens carry that pairing.
 *
 * Only the tokens this surface reads are ported. `--color-code` /
 * `--color-code-ink` stay in the SPA: no auth page renders a slab. Success,
 * warning and info keep the chassis neutrals — the product declares no hue for
 * them, and inventing one here would be a third palette to keep in step.
 */

/* ===== Light ============================================================= */
:root {
  --color-surface-muted: #fff;
  --color-surface: #f6f7fb;
  --color-surface-raised: #f6f7fb;
  --color-surface-sunken: #f6f7fb;

  --color-text: #1a1a2e;
  --color-text-muted: #5b5b77;
  --color-text-subtle: #5b5b77;

  --color-border: #e3e4ee;
  --color-border-strong: #cfd1e2;

  /* One violet, two jobs. `primary` fills a button and carries white on it
   * (4.6:1); `accent` has to read AS TEXT on the canvas, which is the same
   * value here and is NOT in dark — see below. */
  --color-primary: #6d5dfc;
  --color-primary-contrast: #fff;
  --color-accent: #6d5dfc;
  --color-accent-soft: color-mix(in srgb, #6d5dfc 10%, var(--color-surface-muted));

  /* Every link on this surface reads through the deck's `--primary` alias
   * (`deck.css`: `a { color: var(--primary) }`), which the chassis points at
   * `--color-primary` — the button fill. Repoint it at the text tone, or the
   * dark scheme's 12px legal links inherit the fill and land at 4.0:1. */
  --primary: var(--color-accent);

  --color-danger: #d23b5b;
  --color-danger-bg: color-mix(in srgb, #d23b5b 10%, var(--color-surface-raised));
  --color-danger-line: color-mix(in srgb, #d23b5b 28%, var(--color-surface-raised));

  --shadow-raise: 0 1px 2px rgb(26 26 46 / 4%), 0 8px 24px rgb(26 26 46 / 6%);
  --shadow-pop: 0 14px 44px rgb(26 26 46 / 24%);
  --shadow-lg: 0 14px 44px rgb(26 26 46 / 24%);

  /* The two the one-pager actually rounds to — `rounded-2xl` for a card,
   * `rounded-xl` for a control. The chassis collapses every radius alias onto
   * the 2px `--radius-1`; Feedback's surfaces are considerably rounder. */
  --radius-control: 12px;
  --radius-card: 16px;
}

/* ===== 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-surface-muted: #131322;
    --color-surface: #1c1c30;
    --color-surface-raised: #1c1c30;
    --color-surface-sunken: #1c1c30;

    --color-text: #f2f2f7;
    --color-text-muted: #a3a3bd;
    --color-text-subtle: #a3a3bd;

    --color-border: #2c2c45;
    --color-border-strong: #3d3d5c;

    /* The fill does not move — white on #6d5dfc is the button the marketing
     * page ships, and it reads the same on either canvas. The TEXT tone does:
     * #6d5dfc on #131322 is 4.0:1, under AA for the links and the badge copy
     * this surface sets in it. */
    --color-accent: #8f83ff;
    --color-accent-soft: color-mix(in srgb, #6d5dfc 22%, var(--color-surface-muted));

    --color-danger: #ff6b8a;
    --color-danger-bg: color-mix(in srgb, #ff6b8a 12%, var(--color-surface-raised));
    --color-danger-line: color-mix(in srgb, #ff6b8a 30%, var(--color-surface-raised));

    /* An ink-tinted shadow is invisible on a dark canvas: elevation there is
     * read from the shadow being darker than the surface, so both go to black
     * and deepen. */
    --shadow-raise: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
    --shadow-pop: 0 14px 44px rgb(0 0 0 / 55%);
    --shadow-lg: 0 14px 44px rgb(0 0 0 / 55%);
  }
}

/* ===== The two shapes ====================================================
 * ``.fb-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. */
.fb-auth .auth-card {
  border-radius: var(--radius-card);
}

.fb-auth .form-field input,
.fb-auth .form-field select,
.fb-auth .form-field textarea,
.fb-auth .input-affix,
.fb-auth .btn,
.fb-auth .auth-button,
.fb-auth .auth-workspace,
.fb-auth .form-message,
.fb-auth .info-block,
.fb-auth .form-error-summary {
  border-radius: var(--radius-control);
}

/* The one-pager's primary action: a flat accent fill, no border, and hover is
 * opacity rather than a second tone. */
.fb-auth .btn-primary,
.fb-auth .auth-button--sso {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--color-primary-contrast);
}
.fb-auth .btn-primary:hover,
.fb-auth .auth-button--sso:hover {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--color-primary-contrast);
  opacity: 0.9;
}
/* The SSO glyph is a mask painted with the button's ink. */
.fb-auth .auth-button--sso::before {
  background: var(--color-primary-contrast);
}

.fb-auth .form-field input:focus,
.fb-auth .form-field select:focus,
.fb-auth .form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}
/* The workspace-address group draws its own border and focus ring in place of
 * the input's, so it rings in the seam's accent too (DEV-1966). */
.fb-auth .input-affix:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}