/* ==========================================================================
   OSTEO ON THE GO — BRAND FOUNDATION
   ==========================================================================

   The one place the brand palette, typefaces and the "OSTEO | ON THE GO"
   lockup are declared. Loaded by both layouts:

     _AuthLayout.cshtml  (sign in / sign up / reset)   -> then osteo-auth.css
     _Layout2.cshtml     (signed-in dashboard shell)   -> then dashboard-shell.css

   Before this file existed the tokens lived inside osteo-auth.css, and the
   dashboard pulled in the whole 2,300-line auth stylesheet (auth-signup.css)
   just to read a handful of colours. Only brand-level decisions belong here;
   page layout and component rules stay in the sheet that owns them.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

/* THEMING (2026-10-02). Every colour below is now a reference to a semantic
   token in css/osteo-theme.css, with its ORIGINAL LITERAL as the fallback. So:

     * light mode renders exactly the values this file always declared;
     * dark mode is one switch, because --oa-* is the root of the whole cascade
       (--ds-* is built on it, and --ev-* / --om-* / --nf-* on that);
     * if osteo-theme.css ever fails to load, the fallbacks render the current
       light palette rather than an unstyled page.

   The three values with no token of their own are overridden for dark directly
   underneath, which is the same mechanism one level down. Keep that pattern for
   anything added here: a reference when a token means the same thing, a dark
   override when it does not. Never a second copy of a component rule. */
:root {
    /* Ink — the deep indigo used for every heading and label in the design. */
    --oa-ink:            var(--text-heading, #17246b);
    --oa-ink-900:        var(--text-primary, #101a3c);   /* lockup + nav: darker than headings */
    --oa-ink-soft:       #3d4d8f;
    --oa-muted:          var(--text-secondary, #6a7aae);
    --oa-muted-2:        var(--text-muted, #8b98c2);

    /* Brand green. */
    --oa-green:          var(--brand-primary, #0bb27b);
    --oa-green-dark:     var(--brand-primary-hover, #069a68);
    --oa-green-light:    var(--brand-primary-light, #35cd97);
    --oa-green-ink:      var(--brand-primary-ink, #0a8f63);

    /* Mint surfaces. */
    --oa-mint-50:        var(--brand-soft-weak, #f2fbf7);
    --oa-mint-100:       var(--brand-soft, #e6f8f0);
    --oa-mint-200:       var(--brand-soft-strong, #d5f4e7);
    --oa-mint-300:       var(--brand-soft-stronger, #bfeeda);
    --oa-mint-400:       var(--brand-soft-strongest, #a5e5cb);

    /* Neutrals. --oa-white is a SURFACE in every one of its ~37 uses (panels,
       cards, the sign-in sheet, two SVG fills standing in for paper), which is
       why it follows --bg-surface rather than staying literally white. */
    --oa-white:          var(--bg-surface, #ffffff);
    --oa-surface:        var(--bg-surface-2, #fcfdff);
    --oa-border:         var(--border-default, #e3e8f5);
    --oa-border-strong:  var(--border-strong, #d3dbee);

    /* Feedback. --oa-warn / --oa-warn-bg are a warmer amber than the shared
       --warning-ink / --warning-soft and are kept at their own values so light
       mode is untouched; their dark values are set below. */
    --oa-danger:         var(--state-danger, #e8434f);
    --oa-danger-bg:      var(--state-danger-soft, #fdeaec);
    --oa-warn:           #c98a00;
    --oa-warn-bg:        #fff6e0;

    /* Type. */
    --oa-font:           'Poppins', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --oa-font-script:    'Caveat', 'Segoe Script', 'Brush Script MT', cursive;
}

/* The three values above that have no semantic token of their own. A mid-navy
   and a dark amber are invisible on a dark surface, so each is restated at the
   lightness dark mode needs. */
/* SPECIFICITY NOTE. A bare [data-theme="dark"] and a bare :root have the SAME
   specificity (0,1,0), so which one wins would depend on stylesheet order — and
   this application loads two dozen stylesheets whose order varies by layout.
   :root[data-theme="dark"] is (0,2,0) and wins outright, which is why every
   token override in this solution is written that way. */
:root[data-theme="dark"] {
    --oa-ink-soft:       #b9c5e0;
    --oa-warn:           #f0c274;
    --oa-warn-bg:        #3a2e14;
}

/* --------------------------------------------------------------------------
   LOCKUP — markup in Views/Shared/_BrandLockup.cshtml
   "OS" heavy, "TEO" lighter, then the dark "ON THE GO" tag. Two spans rather
   than an image so it stays crisp and recolourable.
   -------------------------------------------------------------------------- */

.oa-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    line-height: 1;
}

.oa-brand__word { font-size: 25px; letter-spacing: .2px; color: var(--oa-ink-900); }
.oa-brand__word b { font-weight: 800; }
.oa-brand__word span { font-weight: 500; }

.oa-brand__tag {
    display: inline-block;
    padding: 7px 12px 6px;
    border-radius: 7px;
    background: var(--oa-ink-900);
    color: var(--text-inverse, #ffffff);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Phone: ONE control — a fixed Canada prefix (flag + dial code) and the
   national number, separated by a hairline. Rendered by the shared
   _PhonePrefix partial on all six auth screens and in Create Event's phone
   invitations, so it cannot drift. Lives here (both layouts load this file).

   One box rather than the earlier three (flag / code / number): three boxes
   left ~100px for the number once Email and Phone share a row, and the
   separate "select" box implied a country picker that does not exist. The
   prefix is display only (no name): the server prepends Application:PhoneCode,
   so only the 10-digit national number is ever posted. */
.oa-phone {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    background: var(--oa-white);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-r-control, 10px);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.oa-phone:focus-within {
    border-color: var(--oa-green);
    box-shadow: 0 0 0 3px rgba(11, 178, 123, .13);
}

.oa-phone__prefix {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 0 12px 0 14px;
    border-right: 1px solid var(--oa-border);
    font-size: 14px;
    font-weight: 700;
    color: var(--oa-ink);
    user-select: none;
}

.oa-phone__flag {
    display: block;
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 30, 60, .08);
}

.oa-phone__caret { font-size: 10px; color: var(--oa-muted); }

/* The input sits inside the shared border, so it drops its own. Specific
   enough to beat .oa-input, .oa-control .form-control and the authcard rules. */
.oa-phone .oa-input,
.oa-phone .oa-input:focus {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 14px;
    border: 0;
    border-radius: 0 var(--oa-r-control, 10px) var(--oa-r-control, 10px) 0;
    background: transparent;
    box-shadow: none;
}