/* =====================================================================
   craigish-theme.css — the shared brand layer for craigish.com.

   Every page links this file. It holds the design tokens (colour, type,
   space, radii, shadows, the glass recipe, focus, motion) and the small
   set of components every page shares: kicker / title / body, buttons
   and pills, link rows, cards, the call-to-action, "coming soon", chips,
   the wordmark and the footer line.

   Each world tints the same shapes by overriding a handful of tokens on
   its own :root —
     --cg-accent      interactive colour (links, CTA, focus ring)
     --cg-accent-2    lighter partner for gradients
     --cg-on-accent   text colour on a filled accent
     --cg-tint        titles, kickers and chips
     --cg-warm        "coming soon" and sponsor gold
     --cg-glass-bg / --cg-glass-border / --cg-glass-blur
     --cg-font-display  the world's display face (Orbitron, Cinzel…)
   so sizes, spacing and behaviour stay identical everywhere.
   © Craig Gauthier
   ===================================================================== */

:root {
    /* ---- Brand palette (from Plain) ---- */
    --cg-dark-blue: #001219;
    --cg-medium-blue: #005f73;
    --cg-teal: #0a9396;
    --cg-aqua: #94d2bd;
    --cg-eggshell: #e9d8a6;
    --cg-sand: #ee9b00;
    --cg-rust: #ca6702;
    --cg-burnt-orange: #bb3e03;
    --cg-dark-red: #ae2012;
    --cg-maroon: #9b2226;
    --cg-gold: #e8c873;

    /* ---- World signature colours (launcher plaques, Views menu) ---- */
    --cg-land: #8fd06a;
    --cg-sea: #5cc8ff;
    --cg-air: #b5a6ff;
    --cg-plain: #ee9b00;

    /* ---- Page tint (each page overrides these) ---- */
    --cg-accent: #e8c873;
    --cg-accent-2: #ffe3a1;
    --cg-on-accent: #10131a;
    --cg-tint: #e8c873;
    --cg-warm: #ffd98a;
    --cg-ink: #eef4f8;
    --cg-ink-2: rgba(238, 244, 248, .8);
    --cg-ink-3: rgba(238, 244, 248, .55);
    --cg-line: rgba(255, 255, 255, .12);
    --cg-fill: rgba(255, 255, 255, .05);
    --cg-fill-hover: rgba(255, 255, 255, .1);

    /* ---- Type ---- */
    --cg-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --cg-font-brand: 'Poppins', 'Inter', system-ui, sans-serif;
    --cg-font-display: var(--cg-font-brand);
    --cg-font-btn: var(--cg-font-ui);
    --cg-text-2xs: 10px;
    --cg-text-xs: 11px;
    --cg-text-sm: 12.5px;
    --cg-text-md: 14px;
    --cg-text-lg: 16px;
    --cg-text-xl: 20px;
    --cg-text-2xl: clamp(24px, 3.2vw, 32px);
    --cg-text-3xl: clamp(30px, 5vw, 52px);
    --cg-track-kicker: .22em;
    --cg-track-btn: .12em;
    --cg-leading: 1.65;

    /* ---- Space (4px grid) ---- */
    --cg-1: 4px;
    --cg-2: 8px;
    --cg-3: 12px;
    --cg-4: 16px;
    --cg-5: 20px;
    --cg-6: 24px;
    --cg-8: 32px;
    --cg-edge: 18px;             /* distance of HUD furniture from the viewport edge */

    /* ---- Radii ---- */
    --cg-r-xs: 6px;
    --cg-r-sm: 10px;
    --cg-r-md: 14px;
    --cg-r-lg: 20px;
    --cg-r-pill: 999px;

    /* ---- Elevation ---- */
    --cg-shadow-sm: 0 4px 14px rgba(0, 0, 0, .28);
    --cg-shadow-md: 0 10px 30px rgba(0, 0, 0, .38);
    --cg-shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
    --cg-bevel: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .22);

    /* ---- Glass recipe ---- */
    --cg-glass-bg: rgba(8, 14, 24, .58);
    --cg-glass-bg-strong: rgba(8, 14, 24, .9);
    --cg-glass-border: rgba(255, 255, 255, .14);
    --cg-glass-blur: 16px;

    /* ---- Controls ---- */
    --cg-control-h: 40px;
    --cg-control-h-sm: 34px;

    /* ---- Focus ---- */
    --cg-focus: var(--cg-accent);
    --cg-focus-w: 2px;
    --cg-focus-offset: 3px;

    /* ---- Motion ---- */
    --cg-ease: cubic-bezier(.22, 1, .36, 1);
    --cg-spring: cubic-bezier(.2, .9, .25, 1.2);
    --cg-fast: .15s;
    --cg-med: .25s;
    --cg-slow: .6s;
}

/* ------------------------------------------------------------------ */
/*  Focus — one ring, everywhere. :where() keeps it overridable.       */
/* ------------------------------------------------------------------ */
:where(a, button, [role="button"], [tabindex], input, select, textarea, summary):focus-visible {
    outline: var(--cg-focus-w) solid var(--cg-focus);
    outline-offset: var(--cg-focus-offset);
}

/* ------------------------------------------------------------------ */
/*  Glass panel                                                        */
/* ------------------------------------------------------------------ */
.cg-glass {
    background: var(--cg-glass-bg);
    -webkit-backdrop-filter: blur(var(--cg-glass-blur)) saturate(1.2);
    backdrop-filter: blur(var(--cg-glass-blur)) saturate(1.2);
    border: 1px solid var(--cg-glass-border);
    border-radius: var(--cg-r-md);
    box-shadow: var(--cg-shadow-md), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* ------------------------------------------------------------------ */
/*  Panel anatomy: kicker → title → body → rows / cards → CTA          */
/* ------------------------------------------------------------------ */
.cg-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--cg-2);
    font: 700 var(--cg-text-2xs)/1.2 var(--cg-font-ui);
    letter-spacing: var(--cg-track-kicker);
    text-transform: uppercase;
    color: var(--cg-tint);
}
.cg-kicker::before {
    content: '';
    flex: none;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .8;
}
.cg-title {
    margin: 0 0 var(--cg-4);
    font: 700 var(--cg-text-xl)/1.25 var(--cg-font-display);
    letter-spacing: .04em;
    color: var(--cg-ink);
    text-wrap: balance;
}
.cg-body {
    font: 400 var(--cg-text-md)/var(--cg-leading) var(--cg-font-ui);
    color: var(--cg-ink-2);
}
.cg-body p { margin: 0 0 var(--cg-3); }
.cg-body > :last-child { margin-bottom: 0; }
.cg-body strong { color: var(--cg-ink); }
.cg-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--cg-5) 0 var(--cg-2);
    font: 700 var(--cg-text-2xs)/1.2 var(--cg-font-ui);
    letter-spacing: var(--cg-track-kicker);
    text-transform: uppercase;
    color: var(--cg-tint);
}
.cg-sub::after { content: ''; flex: 1; height: 1px; background: var(--cg-line); }

/* Link row — one destination per line, meta on the right. */
.cg-row {
    display: flex;
    align-items: center;
    gap: var(--cg-3);
    min-height: 44px;
    margin: 0 0 var(--cg-2);
    padding: 10px 14px;
    border-radius: var(--cg-r-sm);
    background: var(--cg-fill);
    border: 1px solid var(--cg-line);
    color: var(--cg-ink);
    font: 600 var(--cg-text-sm)/1.35 var(--cg-font-ui);
    letter-spacing: .01em;
    text-decoration: none;
    transition: background var(--cg-med) var(--cg-ease), border-color var(--cg-med) var(--cg-ease), transform var(--cg-med) var(--cg-ease);
}
.cg-row small {
    margin-left: auto;
    padding-left: var(--cg-3);
    font: 600 var(--cg-text-2xs)/1.2 var(--cg-font-ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cg-ink-3);
    white-space: nowrap;
}
a.cg-row::after {
    content: '→';
    flex: none;
    margin-left: var(--cg-1);
    color: var(--cg-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--cg-med) var(--cg-ease), transform var(--cg-med) var(--cg-ease);
}
a.cg-row:not(:has(small))::after { margin-left: auto; }
a.cg-row:hover {
    background: rgba(255, 255, 255, .09);
    background: color-mix(in srgb, var(--cg-accent) 13%, transparent);
    border-color: var(--cg-accent);
    transform: translateX(3px);
}
a.cg-row:hover::after, a.cg-row:focus-visible::after { opacity: 1; transform: none; }

/* Card — a titled row with a sentence underneath. */
.cg-card {
    display: block;
    margin: 0 0 var(--cg-2);
    padding: 13px 15px;
    border-radius: var(--cg-r-sm);
    background: var(--cg-fill);
    border: 1px solid var(--cg-line);
    color: var(--cg-ink);
    text-decoration: none;
    transition: background var(--cg-med) var(--cg-ease), border-color var(--cg-med) var(--cg-ease), transform var(--cg-med) var(--cg-ease);
}
.cg-card b {
    display: flex;
    align-items: center;
    gap: var(--cg-2);
    font: 700 var(--cg-text-md)/1.3 var(--cg-font-ui);
    color: var(--cg-ink);
}
.cg-card b small, .cg-card b em {
    margin-left: auto;
    padding: 4px 9px;
    border-radius: var(--cg-r-pill);
    font: 700 var(--cg-text-2xs)/1 var(--cg-font-ui);
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cg-accent);
    background: rgba(255, 255, 255, .06);
    background: color-mix(in srgb, var(--cg-accent) 14%, transparent);
}
.cg-card span {
    display: block;
    margin-top: 5px;
    font: 400 var(--cg-text-sm)/1.55 var(--cg-font-ui);
    color: var(--cg-ink-2);
}
a.cg-card:hover {
    background: rgba(255, 255, 255, .09);
    background: color-mix(in srgb, var(--cg-accent) 11%, transparent);
    border-color: var(--cg-accent);
    transform: translateY(-2px);
}

/* Call to action — the one big thing a panel asks you to do. */
.cg-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cg-2);
    width: 100%;
    min-height: 48px;
    margin: var(--cg-4) 0 0;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--cg-r-pill);
    font: 800 var(--cg-text-sm)/1.2 var(--cg-font-btn);
    letter-spacing: var(--cg-track-btn);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    color: var(--cg-on-accent);
    background: linear-gradient(135deg, var(--cg-accent-2), var(--cg-accent));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3), var(--cg-bevel);
    cursor: pointer;
    transition: transform var(--cg-fast) var(--cg-ease), box-shadow var(--cg-med) var(--cg-ease), filter var(--cg-med);
}
.cg-cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 26px color-mix(in srgb, var(--cg-accent) 45%, transparent), var(--cg-bevel); }
.cg-cta:active { transform: translateY(1px); }
.cg-cta.is-warm { --cg-accent: var(--cg-warm); --cg-accent-2: #fff1c7; --cg-on-accent: #1d1404; }

/* "Coming soon" — same pill on every page. */
.cg-soon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 11px;
    border-radius: var(--cg-r-pill);
    border: 1px dashed currentColor;
    font: 700 var(--cg-text-2xs)/1.2 var(--cg-font-ui);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cg-warm);
    background: rgba(255, 217, 138, .06);
}
.cg-soon::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: cg-soon 2.4s ease-out infinite;
}
@keyframes cg-soon {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
    70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

/* Chips — skills, tags. */
.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--cg-3) 0; padding: 0; list-style: none; }
.cg-chip {
    display: inline-block;
    padding: 5px 11px;
    border-radius: var(--cg-r-pill);
    font: 600 var(--cg-text-xs)/1.3 var(--cg-font-ui);
    letter-spacing: .03em;
    color: var(--cg-ink);
    background: rgba(255, 255, 255, .06);
    background: color-mix(in srgb, var(--cg-tint) 13%, transparent);
    border: 1px solid rgba(255, 255, 255, .16);
    border-color: color-mix(in srgb, var(--cg-tint) 35%, transparent);
}

/* ------------------------------------------------------------------ */
/*  Buttons                                                            */
/*  .cg-btn         utility pill (HUD controls, Views, toggles)        */
/*  .cg-btn.is-on   pressed / selected state                           */
/*  .cg-btn.is-solid chunky filled pill (Plain's jump row, Air's nav) — */
/*                  set its colour with --cg-btn-bg / --cg-btn-fg      */
/* ------------------------------------------------------------------ */
.cg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cg-2);
    min-height: var(--cg-control-h);
    padding: 0 18px;
    border-radius: var(--cg-r-pill);
    border: 1px solid var(--cg-glass-border);
    font: 700 var(--cg-text-xs)/1 var(--cg-font-btn);
    letter-spacing: var(--cg-track-btn);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: var(--cg-ink);
    background: var(--cg-glass-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--cg-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background var(--cg-med) var(--cg-ease), border-color var(--cg-med) var(--cg-ease), color var(--cg-med), transform var(--cg-fast) var(--cg-ease), box-shadow var(--cg-med);
}
.cg-btn:hover { border-color: var(--cg-accent); background: color-mix(in srgb, var(--cg-accent) 16%, var(--cg-glass-bg)); }
.cg-btn:active { transform: translateY(1px) scale(.98); }
.cg-btn.is-on, .cg-btn.on, .cg-btn[aria-pressed="true"] {
    color: var(--cg-ink);
    border-color: var(--cg-accent);
    background: color-mix(in srgb, var(--cg-accent) 30%, var(--cg-glass-bg));
    box-shadow: var(--cg-shadow-sm), 0 0 18px color-mix(in srgb, var(--cg-accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.cg-btn svg { width: 15px; height: 15px; flex: none; }
.cg-btn.is-solid {
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid rgba(0, 0, 0, .18);
    font-weight: 900;
    color: var(--cg-btn-fg, #fff);
    background: var(--cg-btn-bg, var(--cg-teal));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28), var(--cg-bevel);
}
.cg-btn.is-solid:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    border-color: rgba(0, 0, 0, .18);
    background: var(--cg-btn-bg, var(--cg-teal));
    box-shadow: 0 10px 22px rgba(0, 0, 0, .34), var(--cg-bevel);
}
.cg-btn.is-solid:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0, 0, 0, .3), inset 0 2px 4px rgba(0, 0, 0, .2); }

/* Solid colourways shared by Plain's jump row and Air's nav. */
.cg-c-teal  { --cg-btn-bg: var(--cg-teal); }
.cg-c-sand  { --cg-btn-bg: var(--cg-sand); --cg-btn-fg: var(--cg-dark-blue); }
.cg-c-rust  { --cg-btn-bg: var(--cg-rust); }
.cg-c-orange{ --cg-btn-bg: var(--cg-burnt-orange); }
.cg-c-maroon{ --cg-btn-bg: var(--cg-maroon); }
.cg-c-blue  { --cg-btn-bg: var(--cg-medium-blue); }
.cg-c-red   { --cg-btn-bg: var(--cg-dark-red); }
.cg-c-sand.is-solid { text-shadow: none; }

/* ------------------------------------------------------------------ */
/*  Wordmark + footer line                                             */
/* ------------------------------------------------------------------ */
.cg-wordmark {
    font: 900 var(--cg-text-lg)/1 var(--cg-font-brand);
    letter-spacing: .24em;
    text-transform: uppercase;
    /* optical centring: trailing tracking would push the word left */
    margin-right: -.24em;
}
.cg-wordmark .cg-dot { color: var(--cg-accent); }
.cg-foot {
    font: 500 var(--cg-text-xs)/1.4 var(--cg-font-ui);
    letter-spacing: .06em;
    color: var(--cg-ink-3);
}
.cg-foot a { color: inherit; text-underline-offset: 3px; }
.cg-foot a:hover { color: var(--cg-accent); }

/* ------------------------------------------------------------------ */
/*  Panel scrollbars — thin and tinted                                 */
/* ------------------------------------------------------------------ */
.cg-scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cg-tint) 45%, transparent) transparent; overscroll-behavior: contain; }
.cg-scroll::-webkit-scrollbar { width: 6px; }
.cg-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--cg-tint) 45%, transparent); border-radius: 6px; }

@media (max-width: 600px) {
    :root { --cg-control-h: 36px; --cg-edge: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .cg-row, .cg-card, .cg-cta, .cg-btn, a.cg-row::after { transition: none; }
    .cg-soon::before { animation: none; }
}

/* Centred kicker (section heads on scrolling pages): a rule on both sides. */
.cg-kicker.is-center { justify-content: center; }
.cg-kicker.is-center::after {
    content: '';
    flex: none;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .8;
}

/* Skip link — the same on every page (craigish-sync.js injects it on the
   3D pages; the launcher writes its own). */
.cg-skip {
    position: fixed; left: 14px; top: -80px; z-index: 10001;
    padding: 10px 16px; border-radius: var(--cg-r-sm);
    background: var(--cg-sand); color: var(--cg-dark-blue);
    font: 700 14px/1.3 var(--cg-font-ui); text-decoration: none;
    box-shadow: var(--cg-shadow-md);
    transition: top .2s;
}
.cg-skip:focus { top: 14px; outline: 2px solid #fff; outline-offset: 2px; }