/* frontend/css/brand-tokens.css - the 19teenth design tokens (design/19teenth-handoff/design-tokens.json) for the whole UI.
   Loaded on every page. Variables only, plus a few opt-in type classes: nothing here restyles an existing page until
   it uses them. Fonts: css/fonts.css (bundled). Rules from the handoff: lime never as text on cream or white (contrast);
   live orange only for live-scoring states; the wordmark is "19" lime + "teenth" cream on ink, all ink on light. */
:root {
    /* Colours */
    --brand-ink: #0B3D2C;            /* primary; launch backgrounds, text on light surfaces */
    --brand-lime: #C8F23A;           /* hero accent: icon, primary buttons, progress, highlights - on ink only as text */
    --brand-cream: #F4F1E6;          /* light surfaces, text on ink */
    --brand-sand: #E3D3A8;           /* secondary surfaces, chips */
    --brand-rough: #1F5A45;          /* tracks, dividers, icon tiles on ink */
    --brand-rough-soft: #174E3B;     /* contour lines, icon tiles on the launch screen */
    --brand-muted: #A9C4B6;          /* secondary text on ink */
    --brand-muted-on-light: #4A6B5C; /* secondary text on cream */
    --brand-live: #FF6B2C;           /* LIVE scoring states only */

    /* Fonts */
    --brand-font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;  /* 700, 800 */
    --brand-font-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;          /* 400, 500, 600 */

    /* Type scale (size / line height / tracking) */
    --brand-type-headline-size: 50px;  --brand-type-headline-leading: 0.98; --brand-type-headline-tracking: -0.025em;
    --brand-type-wordmark-size: 30px;  --brand-type-wordmark-tracking: -0.02em;
    --brand-type-body-size: 16px;      --brand-type-body-leading: 1.5;
    --brand-type-feature-title-size: 15px;
    --brand-type-feature-sub-size: 13px;
    --brand-type-eyebrow-size: 11px;   --brand-type-eyebrow-tracking: 0.14em;

    /* Radii */
    --brand-radius-icon-tile: 12px;
    --brand-radius-card: 20px;
    --brand-radius-app-icon: 22.5%;

    /* Spacing */
    --brand-space-screen-gutter: 32px;
    --brand-space-card-gutter: 24px;
    --brand-space-section-gap: 36px;
    --brand-space-row-gap: 12px;
}

/* Opt-in type styles */
.type-headline { font-family: var(--brand-font-display); font-weight: 800; font-size: var(--brand-type-headline-size); line-height: var(--brand-type-headline-leading); letter-spacing: var(--brand-type-headline-tracking); }
.type-wordmark { font-family: var(--brand-font-display); font-weight: 800; font-size: var(--brand-type-wordmark-size); letter-spacing: var(--brand-type-wordmark-tracking); line-height: 1; }
.type-body { font-family: var(--brand-font-text); font-weight: 400; font-size: var(--brand-type-body-size); line-height: var(--brand-type-body-leading); }
.type-feature-title { font-family: var(--brand-font-text); font-weight: 600; font-size: var(--brand-type-feature-title-size); }
.type-feature-sub { font-family: var(--brand-font-text); font-weight: 400; font-size: var(--brand-type-feature-sub-size); }
.type-eyebrow { font-family: var(--brand-font-text); font-weight: 600; font-size: var(--brand-type-eyebrow-size); letter-spacing: var(--brand-type-eyebrow-tracking); text-transform: uppercase; }
/* The wordmark's "19" on ink */
.wordmark-19 { color: var(--brand-lime); }

/* Sidebar brand mark (README section 7): the 44 px ink tile beside the title block, top-aligned, 14 px gap. It is
   decorative - the organisation name is in the text. A league that uploaded its own logo shows that in the tile's
   place (global-settings.js sets .has-club-logo). Collapsed sidebar (.sidebar-collapsed): the tile alone, 36 px. */
.brand-mark { width: 44px; height: 44px; flex: none; display: block; border-radius: 12px; box-shadow: 0 2px 6px rgba(11, 61, 44, .25); }
.sidebar-brand.has-brand-mark { display: flex; align-items: flex-start; gap: 14px; }
.sidebar-brand.has-brand-mark .brand-mark { margin-top: 1px; }
/* The league's own slot (section 9): its avatar at 48 px (36 px collapsed), shown whole - the avatar artwork carries
   its own rounded tile - or its initials on a Sand tile when it has no logo. global-settings.js applyBranding. */
.sidebar-brand.has-brand-mark #club-logo-display { width: 48px !important; height: 48px !important; border-radius: 12px !important; object-fit: contain !important; flex: none; }
.sidebar-brand .brand-initials { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px;
    background: var(--brand-sand); color: var(--brand-ink); font-family: var(--brand-font-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.sidebar-brand .brand-initials[hidden] { display: none; }
.sidebar-brand.has-club-logo .brand-mark { display: none; }
.sidebar-collapsed .sidebar-brand.has-brand-mark { justify-content: center; }
.sidebar-collapsed .sidebar-brand.has-brand-mark .brand-mark { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
.sidebar-collapsed .sidebar-brand.has-brand-mark #club-logo-display,
.sidebar-collapsed .sidebar-brand .brand-initials { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 14px; }
.sidebar-collapsed .sidebar-brand.has-brand-mark > :not(.brand-mark):not(#club-logo-display):not(.brand-initials) { display: none !important; }
/* The tile takes 58-62 px of the sidebar: let a long organisation name wrap to a third line instead of being cut */
.sidebar-brand.has-brand-mark h2 { -webkit-line-clamp: 3; line-clamp: 3; overflow-wrap: anywhere; }
.sidebar-brand.has-brand-mark #club-name-display:not(h2) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }

/* Admin > Settings > League branding (admin.html #branding-settings-card): each logo at the size it is used */
.branding-logo-slot { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 12px; height: 100%; }
.branding-preview { flex: none; display: flex; align-items: center; justify-content: center; }
.branding-preview-avatar { width: 48px; height: 48px; }
.branding-preview-export { width: 70px; height: 73px; }
.branding-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.branding-preview .brand-initials { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px;
    background: var(--brand-sand); color: var(--brand-ink); font-family: var(--brand-font-display); font-weight: 800; font-size: 18px; }
.branding-preview [hidden] { display: none !important; }