/*
 * Virio Lift - Custom Bootstrap Theme
 * This file implements the custom color palette and typography
 * as defined in the project's design guides.
*/

:root {
    /* Primary & Secondary Colors from the Design Guide */
    --bs-primary: #4f46e5;      /* Indigo-600 */
    --bs-primary-rgb: 79, 70, 229;
    --bs-secondary: #6c757d;    /* Gray-600 */
    --bs-secondary-rgb: 108, 117, 125;

    /* I've added color variables for the text to match the "gray" look from the guide */
    --bs-body-color: #374151;      /* Gray-700 */
    --bs-heading-color: #111827;  /* Gray-900 */
    
    /* Font Families from the Design Guide */
    --bs-font-sans-serif: 'Open Sans', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

/* * Body & Lead Text Styles 
 * As per the Typography guide, the body text is Open Sans 16px,
 * and lead text is Open Sans 21px.
*/
body {
    font-family: var(--bs-body-font-family);
    font-size: 16px;
    /* This applies the new body color site-wide */
    color: var(--bs-body-color);
}

.lead {
    font-size: 21px;
}

/* * Heading Styles (h1-h6)
 * As per the Typography guide, all headings use the Roboto font
 * with a semi-bold weight (600) and specific font sizes.
*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600; /* Semi-Bold */
    /* This applies the new darker gray heading color */
    color: var(--bs-heading-color);
}

h1, .h1 { font-size: 40px; }
h2, .h2 { font-size: 32px; }
h3, .h3 { font-size: 28px; }
h4, .h4 { font-size: 24px; }
h5, .h5 { font-size: 20px; }
h6, .h6 { font-size: 16px; }

/* Custom class for the sub-headline on the homepage */
.sub-headline {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d; /* Gray-600 */
    font-size: 1rem;
}

/*
 * Component Styling
 * Adds custom styling for common components like cards.
*/
.card {
    /* I've increased the border-radius for more pronounced rounding to match the design. */
    border-radius: 1rem;
}

/*
 * Table Typography
 * Ensure table headers use the 'Roboto' heading font and body cells use 'Open Sans'.
*/
.table th {
    font-family: 'Roboto', sans-serif;
    font-weight: 600; /* Semi-Bold */
    color: #495057; /* A slightly darker gray for better contrast */
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.table td {
    font-family: 'Open Sans', sans-serif;
    vertical-align: middle; /* Improves alignment of text and actions */
}

/* Styling for the action links to ensure they are consistent */
.table .text-end a {
    font-weight: 600; /* A bit bolder to stand out */
}