/* GUI component tokens with the values of the MAUI app (Mobile/User/Resources/Styles/ButtonsTokens.xaml,
   InputsTokens.xaml, LabelsTokens.xaml), so each GUI variant looks the same on the web.

   GUI.Web.Razor only exposes per-variant background tokens (--ok-button-bg-start, ...); text, border,
   radius, size and shadow are the shared --gui-button-* / --gui-input-* properties, so they are set
   here on each variant's class. Nothing in GUI changes.

   MAUI writes translucent colors as #AARRGGBB (alpha first) and CSS reads #RRGGBBAA (alpha last):
   never copy an 8-digit MAUI color as-is (#6633CCBD would turn purple). They are written here as rgba().

   Per-theme values live in --fc-gui-* properties: light by default, dark for data-theme="dark" and for
   "system" when the OS is dark - the same three cases as freshcode-theme.css. */

.gui-theme {
    --fc-gui-ink: #031416;
    --fc-gui-accent: #267263;
    --fc-gui-surface: #FFFFFF;
    --fc-gui-surface-soft: #EAF9F7;
    --fc-gui-border: rgba(51, 204, 189, .40);           /* #6633CCBD */
    --fc-gui-ok-text: #FFFFFF;
    --fc-gui-ok-border: rgba(51, 204, 189, .40);        /* #6633CCBD */
    --fc-gui-ok-shadow: rgba(38, 114, 99, .24);
    --fc-gui-cancel-bg: #FFF1F0;
    --fc-gui-cancel-text: #C62828;
    --fc-gui-cancel-border: #FDA29B;
    --fc-gui-custom1-shadow: rgba(38, 114, 99, .08);
    --fc-gui-custom2-start: #C62828;
    --fc-gui-custom2-end: #9F1F1F;
    --fc-gui-custom2-border: rgba(255, 255, 255, .33);  /* #55FFFFFF */
    --fc-gui-custom2-shadow: rgba(198, 40, 40, .22);
    --fc-gui-input-placeholder: rgba(38, 114, 99, .70); /* #B3267263 */
    --fc-gui-input-error: #C62828;
    --fc-gui-input-shadow: rgba(0, 0, 0, .06);
    --fc-gui-label-badge-shadow: rgba(38, 114, 99, .12);
}

.gui-theme[data-theme="dark"] {
    --fc-gui-ink: #EAF9F7;
    --fc-gui-accent: #33CCBD;
    --fc-gui-surface: #062329;
    --fc-gui-surface-soft: #062329;
    --fc-gui-border: rgba(38, 114, 99, .60);            /* #99267263 */
    --fc-gui-ok-text: #EAF9F7;
    --fc-gui-ok-border: rgba(51, 204, 189, .60);        /* #9933CCBD */
    --fc-gui-ok-shadow: rgba(51, 204, 189, .20);
    --fc-gui-cancel-bg: #3A1715;
    --fc-gui-cancel-text: #FF7A7A;
    --fc-gui-cancel-border: #B42318;
    --fc-gui-custom1-shadow: rgba(51, 204, 189, .12);
    --fc-gui-custom2-start: #B42318;
    --fc-gui-custom2-end: #7A1712;
    --fc-gui-custom2-border: rgba(255, 122, 122, .47);  /* #77FF7A7A */
    --fc-gui-custom2-shadow: rgba(255, 122, 122, .28);
    --fc-gui-input-placeholder: rgba(51, 204, 189, .70); /* #B333CCBD */
    --fc-gui-input-error: #FF7A7A;
    --fc-gui-input-shadow: rgba(0, 0, 0, .16);
    --fc-gui-label-badge-shadow: rgba(51, 204, 189, .18);
}

@media (prefers-color-scheme: dark) {
    .gui-theme[data-theme="system"] {
        --fc-gui-ink: #EAF9F7;
        --fc-gui-accent: #33CCBD;
        --fc-gui-surface: #062329;
        --fc-gui-surface-soft: #062329;
        --fc-gui-border: rgba(38, 114, 99, .60);
        --fc-gui-ok-text: #EAF9F7;
        --fc-gui-ok-border: rgba(51, 204, 189, .60);
        --fc-gui-ok-shadow: rgba(51, 204, 189, .20);
        --fc-gui-cancel-bg: #3A1715;
        --fc-gui-cancel-text: #FF7A7A;
        --fc-gui-cancel-border: #B42318;
        --fc-gui-custom1-shadow: rgba(51, 204, 189, .12);
        --fc-gui-custom2-start: #B42318;
        --fc-gui-custom2-end: #7A1712;
        --fc-gui-custom2-border: rgba(255, 122, 122, .47);
        --fc-gui-custom2-shadow: rgba(255, 122, 122, .28);
        --fc-gui-input-placeholder: rgba(51, 204, 189, .70);
        --fc-gui-input-error: #FF7A7A;
        --fc-gui-input-shadow: rgba(0, 0, 0, .16);
        --fc-gui-label-badge-shadow: rgba(51, 204, 189, .18);
    }
}

/* ---- Buttons ---- */

/* OkButton: green-to-mint gradient (the same in both themes). */
.gui-theme .gui-button--ok {
    --ok-button-bg-start: #267263;
    --ok-button-bg-end: #33CCBD;
    --gui-button-radius: 18px;
    --gui-button-min-height: 56px;
    --gui-button-padding-y: 14px;
    --gui-button-padding-x: 28px;
    --gui-button-font-size: 16px;
    --gui-button-border: var(--fc-gui-ok-border);
    --gui-button-text: var(--fc-gui-ok-text);
    --gui-button-shadow: 0 6px 12px var(--fc-gui-ok-shadow);
}

/* CancelButton: soft red tint, red text. */
.gui-theme .gui-button--cancel {
    --cancel-button-bg: var(--fc-gui-cancel-bg);
    --gui-button-radius: 16px;
    --gui-button-min-height: 52px;
    --gui-button-padding-y: 12px;
    --gui-button-padding-x: 20px;
    --gui-button-font-size: 15px;
    --gui-button-border: var(--fc-gui-cancel-border);
    --gui-button-text: var(--fc-gui-cancel-text);
    --gui-button-shadow: none;
}

/* NeutralButton: transparent, outlined in the brand color. */
.gui-theme .gui-button--neutral {
    --neutral-button-bg: transparent;
    --gui-button-radius: 18px;
    --gui-button-min-height: 56px;
    --gui-button-padding-y: 14px;
    --gui-button-padding-x: 20px;
    --gui-button-font-size: 16px;
    --gui-button-border: var(--fc-gui-accent);
    --gui-button-text: var(--fc-gui-accent);
    --gui-button-shadow: none;
}

/* Custom1Button: soft surface with brand-color text (menu entries, secondary actions). */
.gui-theme .gui-button--custom1 {
    --custom1-button-bg-start: var(--fc-gui-surface-soft);
    --custom1-button-bg-end: var(--fc-gui-surface-soft);
    --gui-button-radius: 16px;
    --gui-button-min-height: 54px;
    --gui-button-padding-y: 14px;
    --gui-button-padding-x: 20px;
    --gui-button-font-size: 15px;
    --gui-button-border: var(--fc-gui-border);
    --gui-button-text: var(--fc-gui-accent);
    --gui-button-shadow: 0 2px 6px var(--fc-gui-custom1-shadow);
}

/* Custom2Button: red gradient (SOS, logout). */
.gui-theme .gui-button--custom2 {
    --custom2-button-bg-start: var(--fc-gui-custom2-start);
    --custom2-button-bg-end: var(--fc-gui-custom2-end);
    --gui-button-radius: 16px;
    --gui-button-min-height: 54px;
    --gui-button-padding-y: 14px;
    --gui-button-padding-x: 22px;
    --gui-button-font-size: 17px;
    --gui-button-border: var(--fc-gui-custom2-border);
    --gui-button-text: #FFFFFF;
    --gui-button-shadow: 0 3px 6px var(--fc-gui-custom2-shadow);
}

/* Custom3Button: text link (no background, border or shadow). GUI sets font-size directly on this class. */
.gui-theme .gui-button--custom3 {
    --custom3-button-bg-start: transparent;
    --custom3-button-bg-end: transparent;
    --gui-button-radius: 12px;
    --gui-button-min-height: 40px;
    --gui-button-padding-y: 6px;
    --gui-button-padding-x: 10px;
    --gui-button-border-width: 0;
    --gui-button-text: var(--fc-gui-accent);
    --gui-button-shadow: none;
    font-size: 15px;
}

/* ---- Inputs (Primary*: name, email, password, phone, multiline) ---- */

.gui-theme .gui-input,
.gui-theme .gui-phone {
    --gui-input-radius: 16px;
    --gui-input-min-height: 56px;
    --gui-input-padding-y: 12px;
    --gui-input-padding-x: 16px;
    --gui-input-font-size: 16px;
    --gui-input-background: var(--fc-gui-surface);
    --gui-input-text: var(--fc-gui-ink);
    --gui-input-border: var(--fc-gui-border);
    --gui-input-focus-border: var(--fc-gui-accent);
    --gui-input-error-border: var(--fc-gui-input-error);
    --gui-input-shadow: 0 2px 6px var(--fc-gui-input-shadow);
}

/* SecondaryGeneralText (recovery code): bigger text, tighter padding. */
.gui-theme .gui-input--secondary {
    --gui-input-min-height: 60px;
    --gui-input-padding-y: 8px;
    --gui-input-padding-x: 8px;
    --gui-input-font-size: 24px;
}

/* GUI has no placeholder token. */
.gui-theme .gui-input input::placeholder,
.gui-theme .gui-input textarea::placeholder,
.gui-theme .gui-phone input::placeholder {
    color: var(--fc-gui-input-placeholder);
    opacity: 1;
}

/* ---- Labels ---- */

.gui-theme .gui-label--title { --gui-title-size: 30px; color: var(--fc-gui-ink); }
.gui-theme .gui-label--subtitle { --gui-subtitle-size: 16px; color: var(--fc-gui-accent); }
.gui-theme .gui-label--content { font-size: 16px; color: var(--fc-gui-ink); }
.gui-theme .gui-label--custom2 { --custom2-label-color: var(--fc-gui-ink); font-size: 17px; }
.gui-theme .gui-label--custom3 { --custom3-label-color: var(--fc-gui-accent); font-size: 14px; }

/* Custom1Label: round badge (the "@" / "•••" glyph on the recovery screens). */
.gui-theme .gui-label--custom1 {
    --custom1-label-color: var(--fc-gui-accent);
    align-self: center;
    display: inline-grid;
    place-items: center;
    min-width: 1.6em;
    padding: 12px 14px;
    border: 1px solid var(--fc-gui-border);
    border-radius: 999px;
    background: var(--fc-gui-surface-soft);
    box-shadow: 0 2px 6px var(--fc-gui-label-badge-shadow);
    font-size: 26px;
}