/*
 * BrandSync Typography Tokens — Membercare.SelfService.Web
 *
 * Defines the font scale variables consumed by component styles.
 * These are fixed design-system values — not customer-configurable.
 *
 * TODO: The color values will be calculated from the ConfiguredVariables stylesheet
 * (MEM-6894) and injected via selfserviceconfiguration.css at runtime.
 * At that point this file can be removed and these variables will be
 * owned entirely by the customer theme pipeline.
 */

:root {

    /* Primary */
    --color-primary-default:            #1a6bcc;
    --color-primary-hover:              #1558a8;
    --color-primary-focused:            #1a6bcc;
    --color-primary-pressed:            #104080;
    --color-primary-container:          #e8f0fb;
    --color-primary-container-hover:    #d0e4f7;

    /* Neutrals */
    --color-neutrals-default:           #1a1a1a;
    --color-neutrals-hover:             #6b7280;
    --color-neutrals-focused:           #374151;
    --color-neutrals-pressed:           #111827;
    --color-neutrals-container:         #ffffff;
    --color-neutrals-container-hover:   #f3f4f6;
    --color-neutrals-container-focused: #f9fafb;
    --color-neutrals-container-pressed: #e5e7eb;

    /* Success */
    --color-success-default:            #16a34a;
    --color-success-container:          #f0fdf4;

    /* Error */
    --color-error-default:              #dc2626;
    --color-error-container:            #fef2f2;

    /* Warning */
    --color-warning-default:            #d97706;
    --color-warning-container:          #fffbeb;

    /* Information */
    --color-information-default:        #0891b2;
    --color-information-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;
}