/* compat.css (Frontend) — AITA-only, TEMPORARY.
   The public site's own style.css (~3.3k lines, ours, staying) and ~109 legacy
   class names in the v3 views were written against the old admin theme, which
   the header no longer loads. This bridges both onto design-system tokens so
   nothing silently loses styling.
   Delete once style.css + the v3 views use the design-system vocabulary directly.
   Rationale/history: design-system/DONE.md. */


/* ---- legacy CSS variables --------------------------------------------------
   style.css consumes these 15 vars (incl. the FULL pagination set). They were
   defined by the old theme's stylesheet; without these aliases they resolve to
   nothing and pagination loses all styling. */
:root {
    --falcon-primary: var(--accent);
    --falcon-body-color: var(--ink);
    --falcon-gray-300: var(--n-200);
    --falcon-gray-500: var(--ink-3);
    --falcon-gray-600: var(--ink-2);

    --falcon-pagination-color: var(--ink-2);
    --falcon-pagination-bg: var(--surface);
    --falcon-pagination-border-color: var(--rule);
    --falcon-pagination-border-width: 1px;
    --falcon-pagination-border-radius: var(--radius-sm);
    --falcon-pagination-hover-color: var(--ink);
    --falcon-pagination-hover-bg: var(--surface-2);
    --falcon-pagination-hover-border-color: var(--rule);
    --falcon-pagination-active-color: var(--on-accent-strong);
    --falcon-pagination-active-bg: var(--accent-strong);
    --falcon-pagination-active-border-color: var(--accent-strong);

    /* referenced by legacy classes below */
    --falcon-bg-shape-bg: var(--surface-2);
    --falcon-divider-content-bg: var(--surface);
    --falcon-font-sans-serif: var(--font-sans);
    --falcon-border-style: solid;

    /* read at runtime by frontend/js/chart-utils.js (getColors/getGrays) for the
       Course + Tournament doughnut charts. Without these the charts render with
       empty colour strings. */
    --falcon-secondary: var(--ink-2);
    --falcon-success: var(--success);
    --falcon-info: var(--info);
    --falcon-warning: var(--warning);
    --falcon-danger: var(--danger);
    --falcon-light: var(--surface-2);
    --falcon-dark: var(--ink);
    --falcon-gray-white: var(--surface);
    --falcon-gray-100: var(--n-100);
    --falcon-gray-200: var(--n-200);
    --falcon-gray-400: var(--n-400);
    --falcon-gray-700: var(--ink-2);
    --falcon-gray-800: var(--ink);
    --falcon-gray-900: var(--ink);
    --falcon-gray-1000: var(--ink);
    --falcon-gray-1100: var(--ink);
    --falcon-gray-black: var(--ink);
}


/* ---- legacy layout / utility classes ---------------------------------------
   Values taken from the old theme's stylesheet verbatim where they are pure
   geometry, and mapped to tokens where they carried colour. Ordered by how many
   v3 views use them. */

/* page shell (72 views) — the public site has no fixed sidebar, so this is
   just the min-height + footer clearance wrapper */
.content { min-height: 100vh; position: relative; padding-bottom: 6.375rem; }

/* type scale (40 + 28 views) */
.fs--1 { font-size: var(--fs--1); }
.fs--2 { font-size: var(--fs--2); }
.fs-0  { font-size: var(--fs-0); }
.fs-1  { font-size: var(--fs-1); }
.fs-2  { font-size: var(--fs-2); }
.fs-3  { font-size: var(--fs-3); }

/* hero / banner system (bg-holder 11, bg-shape 11, overlay 11) */
.bg-holder {
    position: absolute; width: 100%; min-height: 100%; top: 0; left: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    overflow: hidden; will-change: transform, opacity, filter;
    -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 0;
}
.bg-holder.bg-right { background-position: right; }
.bg-shape { position: relative; overflow: hidden; background-color: var(--falcon-bg-shape-bg); }
/* `.overlay` only paints a scrim — it must NOT set `position`. It is commonly
   used together with `.bg-holder` (which is absolute), and a `position:relative`
   here would override it and blow the hero out to full flow height. */
.overlay::before {
    position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, .45);
}
.overlay-0::before { background: rgba(0, 0, 0, .25); }

/* flex helpers (20 / 13 / 6 views) */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between-center { display: flex; align-items: center; justify-content: space-between; }
.flex-between-end { display: flex; align-items: flex-end; justify-content: space-between; }
.flex-1 { flex: 1; }

/* sizing / spacing (33 / 11 / 6 views) */
.vh-50 { height: 50vh !important; }
.vh-25 { height: 25vh !important; }
.mt-n6 { margin-top: -4rem !important; }
.mt-n5 { margin-top: -3rem !important; }
.px-x1 { padding-right: 1.25rem !important; padding-left: 1.25rem !important; }
.py-x1 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.z-index-1 { z-index: 1 !important; }
.z-index--1 { z-index: -1 !important; }

/* ink ramp (text-800 15, text-600 11, text-700 6, text-1000 6) */
.text-1000 { color: var(--ink) !important; }
.text-900  { color: var(--ink) !important; }
.text-800  { color: var(--ink) !important; }
.text-700  { color: var(--ink-2) !important; }
.text-600  { color: var(--ink-3) !important; }
.text-500  { color: var(--ink-3) !important; }
.text-400  { color: var(--n-400) !important; }
.text-300  { color: var(--n-300) !important; }
.bg-100 { background-color: var(--surface-2) !important; }
.bg-200 { background-color: var(--surface-2) !important; }
.bg-300 { background-color: var(--n-200) !important; }

/* misc utilities */
.fw-semi-bold { font-weight: var(--fw-semi) !important; }
.cursor-pointer { cursor: pointer; }
.border-dashed { border-style: dashed !important; }
.font-sans-serif { font-family: var(--font-sans); }
.divider-content-center {
    position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
    padding-left: .5rem; padding-right: .5rem;
    background-color: var(--falcon-divider-content-bg);
    font-family: var(--font-sans); font-size: var(--fs--1);
    color: var(--ink-3); white-space: nowrap;
}

/* scroll regions (13 + 7 views) — the theme ships its own scrollbar styling,
   so these just need to scroll rather than carry the old theme's chrome */
.scrollbar, .scrollbar-overlay { overflow: auto; }

/* `.light` (35 views) forced light-on-dark text inside dark hero sections.
   Scoped to those sections so it can't wash out ordinary content. */
.bg-shape .light, .bg-holder .light, .overlay .light,
.light > .text-white, .light .text-white { color: #fff; }