/*
 * trebble-brand.css — Shared brand tokens for Trebble frontend + backend
 *
 * Deployed to CloudFront at web.trebble.fm/css/trebble-brand.css
 * Loaded by backend server-rendered pages (login, consent, password reset).
 *
 * WARNING: When changing this file, backend auth pages update automatically.
 * Keep in sync with designTokens.ts — CI will fail if they drift.
 */

/* ─── Hellix Font (Trebble brand typeface) ───────────────────────────────── */

@font-face {
    font-family: 'Trebblefont';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url("https://web.trebble.fm/css/fonts/Hellix/Hellix-Regular.woff2") format('woff2'),
         url("https://web.trebble.fm/css/fonts/Hellix/Hellix-Regular.woff") format('woff');
}

@font-face {
    font-family: 'Trebblefont';
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    src: url("https://web.trebble.fm/css/fonts/Hellix/Hellix-SemiBold.woff2") format('woff2'),
         url("https://web.trebble.fm/css/fonts/Hellix/Hellix-SemiBold.woff") format('woff');
}

@font-face {
    font-family: 'Trebblefont';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url("https://web.trebble.fm/css/fonts/Hellix/Hellix-ExtraBold.woff2") format('woff2'),
         url("https://web.trebble.fm/css/fonts/Hellix/Hellix-ExtraBold.woff") format('woff');
}

/* ─── Brand Tokens (CSS Custom Properties) ───────────────────────────────── */

:root {
    /* Brand colors */
    --trebble-primary: #EC7F54;
    --trebble-primary-dark: #C55528;

    /* Text colors */
    --trebble-text-dark: #121212;
    --trebble-text-secondary: rgba(18, 18, 18, 0.7);
    --trebble-text-light: #ffffff;

    /* Background colors */
    --trebble-bg-light: #f5f5f5;
    --trebble-bg-white: #ffffff;

    /* Typography */
    --trebble-font-family: 'Trebblefont', system-ui, -apple-system, sans-serif;

    /* Borders */
    --trebble-border-radius: 0;
    --trebble-border-color: #eeeeee;

    /* Feedback colors */
    --trebble-error: #ec4747;
    --trebble-success: #6fcf97;

    /* Grays (shared palette) */
    --trebble-gray-100: #eeeeee;
    --trebble-gray-200: #e0e0e0;
    --trebble-gray-400: #9e9e9e;
    --trebble-gray-500: #757575;
    --trebble-gray-600: #616161;
}