/* GeekMatter brand stylesheet — "Game Night" (see BRAND.md in the project
   folder for the full guideline). Deployed to /css/brand.css at the server
   root; every app links this BEFORE its own CSS:

     <link rel="stylesheet" href="/css/brand.css">

   This file is tokens + a few shared components only. It sets NO page-level
   defaults (no body styles), so linking it cannot break an app's layout —
   apps opt in through the --gm-* variables and .gm-* classes. */

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Baloo+2:wght@600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
    /* Core palette — sampled from the logo artwork */
    --gm-orange:      #FD9900;   /* Robot Orange — primary action */
    --gm-orange-deep: #D97513;   /* hover / pressed */
    --gm-teal:        #24AA8F;   /* Playmat Teal — brand core */
    --gm-teal-deep:   #1D8A73;
    --gm-ink:         #0D221B;   /* text & outlines */
    --gm-ink-soft:    #4D675F;   /* secondary text */
    --gm-cream:       #FCE8DB;   /* Cream Glove — warm chips/panels */
    --gm-paper:       #FFFBF2;   /* page background */
    --gm-card:        #FFFFFF;   /* surfaces */
    --gm-mint:        #3ECF6E;   /* Mint Pop accent */

    /* Per-app accents: band color + darkened text-on-white variant.
       New apps add a pair here — never reuse another app's color. */
    --gm-ac-library:         var(--gm-teal);
    --gm-ac-library-text:    #17755F;
    --gm-ac-chronicles:      var(--gm-orange);
    --gm-ac-chronicles-text: #B86A00;
    --gm-ac-oathsworn:       var(--gm-mint);
    --gm-ac-oathsworn-text:  #1F8A46;
    --gm-ac-dmd:             #8A6FD1;  /* Dice Purple */
    --gm-ac-dmd-text:        #6C50B4;
    --gm-ac-cabincon:        #E85D5D;  /* Meeple Red */
    --gm-ac-cabincon-text:   #C13F3F;

    /* Type */
    --gm-font-display: 'Lilita One', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
    --gm-font-round:   'Baloo 2', 'Trebuchet MS', sans-serif;
    --gm-font-body:    'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Shape */
    --gm-radius: 16px;
    --gm-radius-sm: 10px;
    --gm-shadow: 0 4px 14px rgba(13, 34, 27, 0.10);
}

/* ---- Shared components ---- */

/* Card: white block with a soft shadow. Set --tilt (±1deg) on showcase grids
   only; it straightens on hover/focus. */
.gm-card {
    background: var(--gm-card);
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow);
    transform: rotate(var(--tilt, 0deg));
    transition: transform .18s ease, box-shadow .18s ease;
}
.gm-card:hover, .gm-card:focus-within {
    transform: rotate(0deg) translateY(-3px);
    box-shadow: 0 8px 22px rgba(13, 34, 27, 0.16);
}

/* Band: solid accent header strip on a card. Ink text always — white fails
   contrast on orange and mint (BRAND.md rule 4). */
.gm-band {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--ac, var(--gm-teal));
    color: var(--gm-ink);
    font-family: var(--gm-font-round); font-weight: 800; font-size: 1.02rem;
    padding: 10px 16px;
    border-radius: var(--gm-radius) var(--gm-radius) 0 0;
}

/* Pill buttons */
.gm-btn {
    display: inline-block;
    background: var(--gm-orange); color: var(--gm-ink);
    font-family: var(--gm-font-round); font-weight: 800; font-size: 0.9rem;
    padding: 9px 22px; border: 0; border-radius: 999px;
    text-decoration: none; cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.gm-btn:hover { background: var(--gm-orange-deep); transform: translateY(-1px); }
.gm-btn--ink { background: var(--gm-ink); color: #fff; }
.gm-btn--ink:hover { background: #1c3b30; }

/* Chip: small cream badge ("members", counts, statuses) */
.gm-chip {
    display: inline-block;
    background: var(--gm-cream); color: var(--gm-ink);
    border: 2px solid var(--gm-ink); border-radius: 999px;
    font-family: var(--gm-font-body); font-weight: 800;
    font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase;
    padding: 1px 9px; vertical-align: middle;
}

/* Focus + motion */
.gm-btn:focus-visible, .gm-card a:focus-visible, a.gm-focus:focus-visible,
summary.gm-focus:focus-visible {
    outline: 3px solid var(--gm-orange); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .gm-card, .gm-btn { transition: none; }
    .gm-card:hover, .gm-card:focus-within { transform: rotate(var(--tilt, 0deg)); }
    .gm-btn:hover { transform: none; }
}