/*
 * Observatory reskin (A/B variant B): fonts, design tokens and shared components.
 * Imported by every observatory entry (main, designer, what4). Values from
 * docs/design/observatory-reskin/README.md; do not round them.
 *
 * Fonts: Latin subsets of Cormorant Garamond and Montserrat (OFL, see assets/font/OFL-*.txt),
 * with metric-matched local fallbacks so the swap doesn't move the layout.
 */

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../../font/cormorant-garamond-latin-dFeOq9U.woff2") format("woff2");
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../../font/cormorant-garamond-italic-latin-N0RBNwx.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../../font/montserrat-latin-h5jUwwC.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Fallbacks sized to the webfonts' average English glyph width. */
@font-face {
    font-family: "Cormorant Fallback";
    src: local("Georgia");
    size-adjust: 88.96%;
    ascent-override: 103.87%;
    descent-override: 32.26%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Cormorant Fallback";
    src: local("Georgia Italic"), local("Georgia-Italic");
    font-style: italic;
    size-adjust: 79.12%;
    ascent-override: 116.78%;
    descent-override: 36.27%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Montserrat Fallback";
    src: local("Arial"), local("Helvetica Neue");
    size-adjust: 114.05%;
    ascent-override: 84.87%;
    descent-override: 22.01%;
    line-gap-override: 0%;
}

/*
 * Tokens after the Refactoring UI audit (designer spec 2026-10-08): pinned hex ramps, no runtime
 * alpha. The older names stay as aliases so every page stylesheet picks the new values up.
 */
:root {
    --ink-950: #080C1E;
    --ink-900: #0B1026;
    --ink-800: #121A3A;
    --ink-700: #1C254F;
    --ink-600: #293360;
    --ink-500: #3E4879;
    --ink-400: #5C6599;
    --ink-300: #8A8FAE;
    --ink-200: #B4B8D2;
    --ink-100: #EBECF5;
    --rule-heavy: #D4D6E3;

    --gold-300: #F6D68C;
    --gold-400: #F0C66A;
    --gold-500: #E4B24E;
    --gold-800: #7C541D;
    --gold-soft: rgba(240, 198, 106, .08);

    --ink: var(--ink-900);
    --ink-2: var(--ink-800);
    --ink-2-glass: var(--ink-800);
    --ink-3: var(--ink-950);
    --line: var(--ink-500);
    --line-soft: var(--ink-500);
    --line-strong: var(--ink-400);
    --star: var(--ink-100);
    --mute: var(--ink-200);
    --placeholder: var(--ink-300);
    --gold: var(--gold-400);
    --gold-hover: var(--gold-300);
    --gold-active: var(--gold-500);
    --gold-tint: var(--gold-soft);

    --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
    --font-body: Montserrat, "Montserrat Fallback", "Helvetica Neue", Arial, sans-serif;

    /* The star field as values, so page stylesheets can put it on their own root element. Dimmed
       (owner review 2026-10-08 18:50) so it stays behind the text it sits under. */
    --obs-sky-image: radial-gradient(circle at 23px 41px, rgba(235, 236, 245, .5) 0 1.6px, transparent 2.3px),
        radial-gradient(circle at 131px 17px, rgba(235, 236, 245, .42) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 67px 149px, rgba(235, 236, 245, .42) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 173px 97px, rgba(235, 236, 245, .34) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 29px 223px, rgba(235, 236, 245, .34) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 211px 191px, rgba(235, 236, 245, .34) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 97px 263px, rgba(235, 236, 245, .34) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 151px 59px, rgba(235, 236, 245, .26) 0 .5px, transparent 1.1px),
        radial-gradient(circle at 47px 113px, rgba(235, 236, 245, .26) 0 .5px, transparent 1.1px),
        radial-gradient(circle at 239px 139px, rgba(235, 236, 245, .26) 0 .5px, transparent 1.1px),
        radial-gradient(circle at 193px 251px, rgba(235, 236, 245, .26) 0 .5px, transparent 1.1px),
        radial-gradient(circle at 113px 199px, rgba(235, 236, 245, .26) 0 .5px, transparent 1.1px),
        radial-gradient(circle at 263px 29px, rgba(235, 236, 245, .26) 0 .5px, transparent 1.1px),
        radial-gradient(circle at 7px 173px, rgba(235, 236, 245, .26) 0 .5px, transparent 1.1px),
        radial-gradient(circle at 227px 83px, rgba(235, 236, 245, .26) 0 .5px, transparent 1.1px);
    --obs-sky-size: 503px 467px, 331px 389px, 331px 389px, 271px 293px, 271px 293px, 271px 293px, 271px 293px,
        239px 227px, 239px 227px, 239px 227px, 239px 227px, 239px 227px, 239px 227px, 239px 227px, 239px 227px;

    color-scheme: dark;
}

/* Star field: no image, no JS. Four white magnitudes at 8:4:2:1 on prime tiles. */
.obs-sky {
    background-color: var(--ink);
    background-image: var(--obs-sky-image);
    background-size: var(--obs-sky-size);
}

.obs-display {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.05;
    margin: 0;
}

.obs-cap {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-100);
}

.obs-coord {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-200);
    font-variant-numeric: tabular-nums;
}

.obs-num {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

.obs-maptitle {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.obs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    min-height: 56px;
    padding: 0 32px;
    border-radius: 4px;
    border: 1px solid transparent;
    font: 600 18px/1 var(--font-body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: outline-offset .15s ease, background-color .15s ease;
}

.obs-btn-gold {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--ink-900);
    outline: 1px solid var(--gold-800);
    outline-offset: 3px;
}

.obs-btn-gold:hover,
.obs-btn-gold:focus-visible {
    background: var(--gold-300);
    border-color: var(--gold-300);
    color: var(--ink-900);
    outline-offset: 5px;
}

.obs-btn-gold:active {
    background: var(--gold-500);
    border-color: var(--gold-500);
}

.obs-btn-ghost {
    min-height: 48px;
    background: transparent;
    border-color: var(--ink-400);
    color: var(--ink-100);
    font-size: 16px;
}

.obs-btn-ghost:hover {
    border-color: var(--ink-100);
    color: var(--ink-100);
}

.obs-sbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 4px;
    border: 1px solid var(--ink-400);
    background: transparent;
    color: var(--ink-100);
    font: 500 14px/1 var(--font-body);
    text-decoration: none;
    cursor: pointer;
}

.obs-sbtn:hover {
    border-color: var(--ink-100);
    color: var(--ink-100);
}

.obs-card {
    background: var(--ink-800);
    border: 0;
    border-radius: 8px;
}