/*
    Identity design tokens.

    These are the same values the application declares in App.xaml. The athlete crosses from the
    native screen into this WebView in the middle of signing in, and the product asks that the seam
    not show: a colour, a radius or a spacing that exists on only one side is a defect here, not a
    detail. When one side changes, the other changes with it.

    Nothing outside this file may hard-code a colour.
*/

:root {
    /* Ground. The page sits on the same near-black the application uses, with the same
       photograph over it. */
    --ows-ground: #0A0B14;
    --ows-ground-deep: #08080F;

    /* The panel that carries every form, matching the sheet anchored at the bottom of the
       native sign-in screen. */
    --ows-panel: #141C2E;
    --ows-panel-rule: #485F85;

    /* Fields and secondary buttons. The hairline is what makes them visible, not the fill:
       #6E7F9C measures 4.1:1 on the panel, where the darker rule it replaced managed 1.6:1 and
       disappeared outdoors. */
    --ows-field: #1E2838;
    --ows-field-rule: #6E7F9C;
    --ows-field-rule-strong: #8FA0BD;

    /* Type. */
    --ows-ink: #FFFFFF;
    --ows-ink-soft: #E4E9F0;
    --ows-ink-muted: #8892A4;

    /* The mark. Teal carries the primary action and nothing else: it is the one colour that
       means "this is what you came to do". */
    --ows-accent: #32BEA6;
    --ows-accent-pressed: #2AA890;
    --ows-on-accent: #0A0B14;

    /* States. */
    --ows-danger: #E86070;
    --ows-danger-ground: rgba(232, 96, 112, 0.14);
    --ows-warning: #E8B04B;
    --ows-warning-ground: rgba(232, 176, 75, 0.12);
    --ows-success: #32BEA6;
    --ows-success-ground: rgba(50, 190, 166, 0.12);

    /* Focus. Deliberately loud: the ring this replaces was switched off across every Identity
       page by a single `*:focus { outline: none }`, which is a straight WCAG 2.4.7 failure and
       left keyboard users with no idea where they were. */
    --ows-focus: #7FD8FF;

    /* Type scale. Fixed, not fluid: this is product UI read at a consistent size, and a heading
       that shrinks with the viewport looks worse, not better. */
    --ows-text-xs: 0.8125rem;   /* 13px  legal lines, helper text */
    --ows-text-sm: 0.875rem;    /* 14px  labels, secondary links */
    --ows-text-base: 1rem;      /* 16px  fields and body. Never smaller: iOS zooms on focus
                                          below 16px, which throws the layout sideways. */
    --ows-text-lg: 1.125rem;    /* 18px  lead paragraph */
    --ows-text-xl: 1.5rem;      /* 24px  page heading */
    --ows-text-2xl: 1.875rem;   /* 30px  confirmation headline */

    --ows-weight-normal: 400;
    --ows-weight-semibold: 600;
    --ows-weight-bold: 700;

    /* Spacing, on a 4px grid. */
    --ows-space-1: 0.25rem;
    --ows-space-2: 0.5rem;
    --ows-space-3: 0.75rem;
    --ows-space-4: 1rem;
    --ows-space-5: 1.5rem;
    --ows-space-6: 2rem;
    --ows-space-7: 2.75rem;

    /* Radii, matching the native controls. */
    --ows-radius-field: 11px;
    --ows-radius-panel: 26px;

    /* Touch targets. 44px is the floor the product commits to, secondary links included: these
       screens get used outdoors, sometimes with gloves on. */
    --ows-target: 44px;

    --ows-shadow-panel: 0 -18px 40px rgba(4, 6, 12, 0.55);

    /* The veil laid over the background picture. A token, not a literal buried in identity.css:
       a theme that changes the ground has to be able to change what darkens it, and leaving this
       hard-coded meant the palette held only as long as nobody reordered the stylesheets. */
    --ows-veil: linear-gradient(to bottom,
        rgba(10, 11, 20, 0.86) 0%,
        rgba(10, 11, 20, 0.62) 26%,
        rgba(10, 11, 20, 0.58) 52%,
        rgba(10, 11, 20, 0.92) 100%);
}