/**
 * Kisoma PUBLIC WEBSITE button system -- the single source of truth for
 * every marketing/registration CTA (navbar, hero, features, pricing, blog,
 * legal, registration + its status pages). Scoped entirely to `.public-site`
 * (the body class set only by layouts/home_page/master.blade.php), so it
 * can never reach the dashboard, school portal, or a tenant's own public
 * website -- those use unrelated layouts/stylesheets.
 *
 * Root causes this file fixes (see audit notes in the task):
 *  1. A sitewide `a { color: #29363F !important; }` rule (style.css) was
 *     silently overriding every anchor-tag button's intended text color
 *     unless that button's own CSS also used !important -- <input> buttons
 *     (e.g. the registration submit) were unaffected, which is exactly why
 *     they "matched" while <a>-tag CTAs (nav, hero, pricing) drifted.
 *  2. Half a dozen independently hardcoded greens (#0aaa6c, #168447,
 *     #168a5b, #10c469, #16865a, ...) instead of one shared token.
 *  3. Per-component height/radius/shadow values invented separately
 *     (42-52px heights, 8-12px radii, 3 different hover shadows/lifts).
 *
 * Everything below reads from --primary-color (already the live,
 * system-settings-driven brand color token used across the app) rather
 * than a new fixed hex, and derives darker "ink" shades from it with
 * color-mix() -- the same technique already used in home-hero.css and
 * public-pages.css -- instead of inventing yet another green.
 */

.public-site {
    --kisoma-btn-primary-bg: var(--primary-color, #56cc99);
    --kisoma-btn-primary-bg-hover: color-mix(in srgb, var(--primary-color, #56cc99) 85%, black);
    --kisoma-btn-primary-bg-active: color-mix(in srgb, var(--primary-color, #56cc99) 75%, black);
    --kisoma-btn-primary-text: #ffffff;

    /* Accessible dark-green ink for text/borders on light surfaces --
       matches the formula already used for --kisoma-features-green. */
    --kisoma-btn-ink: color-mix(in srgb, var(--primary-color, #56cc99) 62%, #0a5034);
    --kisoma-btn-ink-hover: color-mix(in srgb, var(--primary-color, #56cc99) 50%, #0a5034);
    --kisoma-btn-border: color-mix(in srgb, var(--primary-color, #56cc99) 45%, white);
    --kisoma-btn-surface-hover: color-mix(in srgb, var(--primary-color, #56cc99) 10%, white);

    --kisoma-btn-radius: 10px;
    --kisoma-btn-height: 48px;
    --kisoma-btn-height-sm: 40px;
    --kisoma-btn-padding-x: 24px;
    --kisoma-btn-padding-x-sm: 18px;
    --kisoma-btn-font-size: var(--kisoma-font-button, 15px);
    --kisoma-btn-font-weight: 600;
    --kisoma-btn-icon-gap: 8px;
    --kisoma-btn-icon-size: 16px;
}

/* ---------------------------------------------------------------------
   Primary -- .commonBtn is already the most widely used button class on
   the public site (registration, CTA banners, features link, etc.), so
   it stays the canonical base rather than introducing a parallel class
   name. Higher specificity (.public-site .commonBtn) than the legacy
   base rule in style.css so it wins without needing !important there.
------------------------------------------------------------------------ */
.public-site .commonBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kisoma-btn-icon-gap);
    min-height: var(--kisoma-btn-height);
    margin-top: 0;
    padding: 0 var(--kisoma-btn-padding-x);
    background-color: var(--kisoma-btn-primary-bg);
    border: 1px solid var(--kisoma-btn-primary-bg);
    border-radius: var(--kisoma-btn-radius);
    box-shadow: none;
    color: var(--kisoma-btn-primary-text) !important;
    font-family: inherit;
    font-size: var(--kisoma-btn-font-size);
    font-weight: var(--kisoma-btn-font-weight);
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.public-site .commonBtn:hover,
.public-site .commonBtn:focus-visible {
    background-color: var(--kisoma-btn-primary-bg-hover);
    border-color: var(--kisoma-btn-primary-bg-hover);
    color: var(--kisoma-btn-primary-text) !important;
    text-decoration: none !important;
}

.public-site .commonBtn:active {
    background-color: var(--kisoma-btn-primary-bg-active);
    border-color: var(--kisoma-btn-primary-bg-active);
}

.public-site .commonBtn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--kisoma-btn-primary-bg) 40%, transparent);
    outline-offset: 2px;
}

.public-site .commonBtn:disabled,
.public-site .commonBtn.disabled,
.public-site .commonBtn[aria-disabled="true"] {
    background-color: var(--kisoma-btn-primary-bg);
    border-color: var(--kisoma-btn-primary-bg);
    color: var(--kisoma-btn-primary-text) !important;
    opacity: .55;
    box-shadow: none;
    cursor: not-allowed;
}

/* Icon inside a button label: consistent size + gap, subtle nudge on hover. */
.public-site .commonBtn i,
.public-site .commonBtn svg {
    width: var(--kisoma-btn-icon-size);
    height: var(--kisoma-btn-icon-size);
    font-size: var(--kisoma-btn-icon-size);
    flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
    .public-site .commonBtn:hover i,
    .public-site .commonBtn:hover svg {
        transform: translateX(2px);
        transition: transform 160ms ease;
    }
}

/* ---------------------------------------------------------------------
   Secondary / Inverse -- white surface + accessible dark-green ink.
   Visually identical on purpose: a light-on-light "secondary" card
   button and a light-on-dark "inverse" hero/CTA button read the same
   way, they just sit on different backgrounds. One ruleset, two class
   names so markup can express intent.
------------------------------------------------------------------------ */
.public-site .commonBtn.is-secondary,
.public-site .commonBtn.is-inverse {
    background-color: #fff;
    border-color: var(--kisoma-btn-border);
    color: var(--kisoma-btn-ink) !important;
}

.public-site .commonBtn.is-secondary:hover,
.public-site .commonBtn.is-secondary:focus-visible,
.public-site .commonBtn.is-inverse:hover,
.public-site .commonBtn.is-inverse:focus-visible {
    background-color: var(--kisoma-btn-surface-hover);
    border-color: var(--kisoma-btn-ink);
    color: var(--kisoma-btn-ink-hover) !important;
}

.public-site .commonBtn.is-inverse {
    border-color: #fff;
}

.public-site .commonBtn.is-inverse:hover,
.public-site .commonBtn.is-inverse:focus-visible {
    border-color: var(--kisoma-btn-surface-hover);
}

/* ---------------------------------------------------------------------
   Compact -- navbar/header usage, same family, smaller footprint.
------------------------------------------------------------------------ */
.public-site .commonBtn.is-sm {
    min-height: var(--kisoma-btn-height-sm);
    padding: 0 var(--kisoma-btn-padding-x-sm);
}

/* ---------------------------------------------------------------------
   Full-width contexts (registration submit, status-page actions) --
   centralized here so individual pages only need to add the class/
   selector, not repeat height/radius/background declarations.
------------------------------------------------------------------------ */
.public-site .kisoma-registration-submit .commonBtn,
.public-site .kisoma-status-actions .commonBtn {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .public-site .commonBtn,
    .public-site .commonBtn i,
    .public-site .commonBtn svg {
        transition: none;
    }

    .public-site .commonBtn:hover i,
    .public-site .commonBtn:hover svg {
        transform: none;
    }
}