/* ==========================================================================
   LeagueCanvas Brand Tokens
   Single source of truth for brand colors + typography.
   Do NOT hard-code brand hex values in components — reference these vars.
   Palette: Diamond Blue (primary), Swing Orange (accent), Ink (dark),
            Canvas (light surface tint), Sky (Canvas wordmark on dark).
   Typeface: Hanken Grotesk (loaded in App.razor head).
   ========================================================================== */
:root {
    /* Core palette */
    --lc-blue: #1A6DB8;          /* Diamond Blue — primary */
    --lc-blue-dark: #14598F;     /* darker primary, gradients/hover */
    --lc-blue-darker: #0F4670;
    --lc-orange: #FF9800;        /* Swing Orange — accent ("the paint") */
    --lc-orange-dark: #F57C00;
    --lc-orange-light: #FFB74D;
    --lc-ink: #0E3A5C;           /* body text / dark surfaces */
    --lc-ink-deep: #0A2A44;      /* darker ink, gradient end */
    --lc-canvas: #F1F7FB;        /* light surface tint */
    --lc-sky: #6FB2E8;           /* "Canvas" wordmark light blue on dark */

    /* Tints (Diamond Blue at low alpha for soft fills) */
    --lc-blue-rgb: 26, 109, 184;
    --lc-orange-rgb: 255, 152, 0;

    /* Neutrals */
    --lc-text-secondary: #5b6b7a;
    --lc-border: #e2e8f0;
    --lc-white: #ffffff;

    /* Typography */
    --lc-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --lc-wordmark-tracking: -0.018em; /* −1.8% per brand sheet */
}

/* Apply the brand typeface globally (MudBlazor + custom markup). */
body,
.mud-typography,
.mud-input,
.mud-button-root {
    font-family: var(--lc-font);
}

/* Brand wordmark — "League" Ink, "Canvas" Blue, weight 600, tracking −1.8%.
   On dark surfaces: "League" white, "Canvas" Sky. */
.lc-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--lc-font);
    font-weight: 600;
    letter-spacing: var(--lc-wordmark-tracking);
    text-decoration: none !important;
    line-height: 1;
}

.lc-wordmark .lc-word-league { color: var(--lc-ink); }
.lc-wordmark .lc-word-canvas { color: var(--lc-blue); }

.lc-wordmark--on-dark .lc-word-league { color: var(--lc-white); }
.lc-wordmark--on-dark .lc-word-canvas { color: var(--lc-sky); }

/* Logo lockup: symbol + wordmark with brand clear-space. */
.lc-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

.lc-logo__symbol {
    display: block;
    height: 32px;
    width: 32px;
}