/* ==========================================================================
   RT Design System — auth screens (sign in + the whole allauth entrance flow)
   --------------------------------------------------------------------------
   Source of truth : Design Reference/rt-design-system/tokens.json
   Approved mockup : docs/mockups/login_screen_design_comparison_v1.html
   Activated by    : <body data-ds="rt"> on templates/layouts/auth_base.html
   Load order      : main.css -> rt-dashboard.css -> auth.css -> THIS FILE

   WHY data-ds SITS DIRECTLY ON THE BODY TAG HERE
   Every other RT screen opts in with [% block body_ds %]rt[% endblock %] from
   templates/layouts/base.html. The auth screens do NOT extend that layout --
   they are standalone documents with no sidebar, header or app chrome -- so
   the block never reaches them. auth_base.html therefore writes data-ds="rt"
   itself. Same trap the HR Attitude Scorecard hit: a self-contained template
   ignores the opt-in.

   The tokens still sit on body rather than :root, to match every other RT
   screen and to stay correct if these pages are ever given the accent
   inline-style treatment base.html applies to <html>.

   REVERTING
   Drop the rt-login.css <link> and the data-ds attribute in auth_base.html.
   auth.css carries the current system's values unscoped, so the screen falls
   back with no other edit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Named screen tokens — RT values. Departures 1, 2, 3, 4, 6, 7, 8, 10.
   -------------------------------------------------------------------------- */
body[data-ds="rt"] {
    /* DEPARTURE 2 — figure and ground invert.
       RT's page default is #ffffff and its card surface is #fafafa. A
       shadowless card on those two would have no edge at all, so the auth
       screen swaps them: the page takes #fafafa and the card takes #ffffff,
       and a 1px border carries the separation. Same result as the current
       system's white-card-on-tinted-page, reached the RT way. */
    --au-page-bg: var(--color-surface);            /* #fafafa */
    --au-card-bg: #ffffff;

    /* DEPARTURE 1 — the branding panel, and the whole argument.
       Today: #27187E deep indigo carrying a navy blur at 25% and an orange
       blur at 15%. RT has one accent and no page glow (rt-dashboard.css sets
       background-image:none). A coral 45% panel is unusable and an indigo
       panel with a coral logo reintroduces the second hue RT exists to
       remove, so the panel goes near-black and both blurs are switched off.
       Side effect: it satisfies the project's own "soft edge-glow, never a
       full-strength gradient blob" rule, which the current blobs do not. */
    --au-panel-bg: #0d0d0d;
    --au-panel-fg: #f7f8f8;
    --au-panel-fg-2: #a1a1aa;
    --au-panel-fg-3: #8b8b93;
    --au-panel-glow: 0;
    --au-panel-rule: transparent;

    /* The coral logo tile is the only colour on that half of the screen. */
    --au-logo-bg: var(--color-primary);
    --au-logo-fg: #ffffff;

    /* DEPARTURE 3 — elevation. Borders carry the edge, shadows nearly vanish,
       and the hover lift goes: there is nothing to lift toward on a page that
       holds one card. */
    --au-card-border: var(--color-border);
    --au-card-shadow: var(--shadow-sm);
    --au-card-shadow-hover: var(--shadow-sm);

    /* DEPARTURE 4 — radii. All three RT radius tokens resolve to 6px, which
       also removes a live inconsistency: today the primary button is 4px and
       the Google button 8px, stacked one above the other. */
    --au-r-card: var(--radius-lg);
    --au-r-ctl: var(--radius-sm);

    /* DEPARTURE 6 — links go foreground with an underline, not coral.
       Coral text at 13-14px measures 3.3-3.4:1 on white, which is where the
       contrast notes on the last six screens have landed. Coral is reserved
       for the primary button; the underline is the affordance the colour is
       no longer carrying. */
    --au-link: var(--color-text-primary);
    --au-link-underline: underline;

    /* DEPARTURE 5 — the error banner drops its fill.
       This is the second real argument on the screen. The banner sits ~200px
       above the primary button, and under RT both would be saturated warm:
       RT's stock danger is ~9 degrees of hue from coral, which is why
       rt-dashboard.css already pushes error to #b42318. Setting the fill to 0
       leaves a neutral surface with a 3px red rule and a filled glyph, so the
       only saturated warm element on the card is the button. */
    --au-alert-fill: 0;

    /* DEPARTURE 7 — the primary button's focus ring gets a card-coloured
       inner ring first. A coral 35% ring around a coral fill barely reads. */
    --au-focus-inset: var(--au-card-bg);

    /* DEPARTURE 8 — modal header flattens. Same departure already taken on
       HR Review and Finance Approval. */
    --au-modal-hd-bg: transparent;
    --au-modal-hd-fg: var(--color-text-primary);

    --au-brand-tracking: -0.02em;
    --au-meta-bg: var(--color-surface-secondary);

    /* DEPARTURE 10 — password strength is an ordinal ramp, never four steps
       of coral. Middle band takes RT chart-3 teal; the ends take this layer's
       semantic tokens. Same reasoning that produced --rt-band-1..5. */
    --au-str-1: var(--color-error);      /* #b42318 */
    --au-str-2: var(--color-warning);    /* #b54708 */
    --au-str-3: #02b8cc;                 /* RT chart-3 */
    --au-str-4: var(--color-success);    /* #0f9d58 */
}

/* --------------------------------------------------------------------------
   2. DEPARTURE 9 — RT dark needs a rule down the middle.
   The current system's panel is a fixed dark surface in both modes, so a
   current-dark login page barely changes. RT-dark puts a #111113 panel
   against an #0a0a0b page: three values apart, and the 45/55 split would
   simply disappear. A 1px --color-border divide carries it, which is RT's
   stated elevation model rather than an exception to it.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. Rules that a token alone cannot express
   -------------------------------------------------------------------------- */

/* The alert body text goes foreground under RT. With the fill gone, the tone
   is carried by the rule, the glyph and the title; running the whole
   paragraph in the error colour on a neutral surface reads as a second
   accent. The title keeps the tone. */
body[data-ds="rt"] .au-alert { color: var(--color-text-primary); }
body[data-ds="rt"] .au-alert-ttl { color: var(--au-a-fg); }

/* The modal header icon tile loses its translucent-white wash, which was
   built for the gradient, and becomes a bordered neutral tile. */
body[data-ds="rt"] .aum-hd-ico {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* An input inside the card must not inherit main.css's --color-surface,
   which under RT is #fafafa and therefore invisible against a #ffffff card. */
body[data-ds="rt"] .au-input,
body[data-ds="rt"] input[type="text"],
body[data-ds="rt"] input[type="email"],
body[data-ds="rt"] input[type="password"] {
    background-color: var(--au-card-bg);
}

/* The Google button keeps its four brand hexes in both systems — Google's
   brand terms fix them. This is the one permitted foreign palette on an RT
   screen; anything sweeping for colour leaks should exclude it by name. */
body[data-ds="rt"] .au-sso-btn { background: var(--au-card-bg); }