/*
 * BrandSync static fallback tokens — Membercare.SelfService.Web
 *
 * Defines the font scale and the default color values used when no brand
 * theme has been configured by the customer.
 *
 * Load order (see App.razor):
 *   1. This file   — static fallbacks (--brand-* and --color-* defaults)
 *   2. ConfiguredRootVariables.css — dynamic overrides, sets --brand-* from DB
 *   3. CalculatedVariables.css     — derives --color-* via color-mix from --brand-*
 *
 * The --brand-* variables here ensure that color-mix() in CalculatedVariables.css
 * always resolves to a valid color even when a customer has not configured a role.
 */

:root {

    /* Raw brand colors — overridden by ConfiguredRootVariables.css when the
     * customer has configured a theme. These defaults must stay in sync with
     * the --color-*-default fallbacks below. */
    --brand-color-1: #1a6bcc;
    --brand-color-2: #1a1a1a;
    --brand-color-3: #16a34a;
    --brand-color-4: #dc2626;
    --brand-color-5: #0891b2;

    /* Color 1 — must stay in sync with --brand-color-1 above */
    --color-1-default:            #1a6bcc; /* matches --brand-color-1 */
    --color-1-hover:              #1558a8;
    --color-1-focused:            #1a6bcc; /* matches --brand-color-1 */
    --color-1-pressed:            #104080;
    --color-1-container:          #e8f0fb;
    --color-1-container-hover:    #d0e4f7;

    /* Color 2 — must stay in sync with --brand-color-2 above */
    --color-2-default:           #1a1a1a; /* matches --brand-color-2 */
    --color-2-hover:             #6b7280;
    --color-2-focused:           #374151;
    --color-2-pressed:           #111827;
    --color-2-container:         #ffffff;
    --color-2-container-hover:   #f3f4f6;
    --color-2-container-focused: #f9fafb;
    --color-2-container-pressed: #e5e7eb;

    /* Color 3 — must stay in sync with --brand-color-3 above */
    --color-3-default:            #16a34a; /* matches --brand-color-3 */
    --color-3-container:          #f0fdf4;

    /* Color 4 — must stay in sync with --brand-color-4 above */
    --color-4-default:              #dc2626; /* matches --brand-color-4 */
    --color-4-container:            #fef2f2;

    /* Warning — no brand input; not overridden by CalculatedVariables.css */
    --color-warning-default:            #d97706;
    --color-warning-container:          #fffbeb;

    /* Color 5 — must stay in sync with --brand-color-5 above */
    --color-5-default:        #0891b2; /* matches --brand-color-5 */
    --color-5-container:      #ecfeff;

    --font-family: 'Roboto', sans-serif;

    --font-h1-size: 48px;   --font-h1-line-height: 60px;
    --font-h2-size: 40px;   --font-h2-line-height: 52px;
    --font-h3-size: 32px;   --font-h3-line-height: 44px;
    --font-h4-size: 28px;   --font-h4-line-height: 40px;
    --font-h5-size: 24px;   --font-h5-line-height: 36px;
    --font-h6-size: 20px;   --font-h6-line-height: 32px;

    --font-body-lg-size: 18px;         --font-body-lg-line-height: 28px;
    --font-body-md-size: 16px;         --font-body-md-line-height: 24px;
    --font-body-md-regular-size: 16px; --font-body-md-regular-line-height: 24px;
    --font-body-sm-size: 14px;         --font-body-sm-line-height: 20px;

    --font-caption-lg-size: 16px;      --font-caption-lg-line-height: 24px;
    --font-caption-md-size: 14px;      --font-caption-md-line-height: 20px;
    --font-caption-sm-size: 11px;      --font-caption-sm-line-height: 16px;
}