/**
 * TRAIN HUBS BRAND STYLE GUIDE
 *
 * This file contains all brand configuration.
 * Update this file to change fonts, colors, and gradients across the entire website.
 */

/* ============================================
   BRAND FONTS
   ============================================ */

@font-face {
    font-family: 'Carnac';
    src: url('../fonts/Carnac-ExtraBoldIte.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Dusha';
    src: url('../fonts/Dusha_-_FIFA_World_Cup.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */

:root {
    /* BRAND COLORS */
    --brand-primary: #0187c4;
    --brand-primary-dark: #0026e1;
    --brand-accent-green: #6fa217;
    --brand-accent-olive: #6fa217;
    --brand-success-green: #0a6c2f;

    /* BRAND GRADIENTS */
    --brand-gradient: linear-gradient(135deg, #0187c4 0%, #6fa217 100%);
    --brand-gradient-light: linear-gradient(135deg, rgba(1, 135, 196, 0.1) 0%, rgba(111, 162, 23, 0.1) 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(1, 135, 196, 0.05) 0%, rgba(111, 162, 23, 0.05) 100%);

    /* TYPOGRAPHY - FONT FAMILIES */
    --font-display: 'Carnac', 'Montserrat', 'Manrope', sans-serif;
    --font-body: 'Dusha', 'Montserrat', 'Manrope', sans-serif;
    --font-slogan: 'Dusha', sans-serif;
    --font-arabic: 'Tajawal', sans-serif;
    --font-fallback: 'Montserrat', 'Manrope', sans-serif;

    /* TYPOGRAPHY - SIZES */
    --font-size-hero: 3.5rem;        /* 56px */
    --font-size-h1: 2.5rem;          /* 40px */
    --font-size-h2: 2rem;            /* 32px */
    --font-size-h3: 1.5rem;          /* 24px */
    --font-size-body: 1rem;          /* 16px */
    --font-size-small: 0.875rem;     /* 14px */

    /* BACKGROUNDS */
    --bg-light: #ffffff;
    --bg-dark: #101a22;
    --bg-surface-light: #f5f7f8;
    --bg-surface-dark: #1a2632;

    /* TEXT COLORS */
    --text-main: #111518;
    --text-sub: #60788a;
}

/* ============================================
   BRAND TYPOGRAPHY RULES
   ============================================ */

/* Default body font for LTR (Left-to-Right) */
[dir="ltr"] *:not(.material-symbols-outlined) {
    font-family: var(--font-body) !important;
}

/* Arabic font for RTL (Right-to-Left) */
[dir="rtl"] *:not(.material-symbols-outlined) {
    font-family: var(--font-arabic) !important;
}

/* Display font for all headings */
[dir="ltr"] h1:not(.material-symbols-outlined),
[dir="ltr"] h2:not(.material-symbols-outlined),
[dir="ltr"] h3:not(.material-symbols-outlined),
[dir="ltr"] h4:not(.material-symbols-outlined),
[dir="ltr"] h5:not(.material-symbols-outlined),
[dir="ltr"] h6:not(.material-symbols-outlined),
[dir="ltr"] .font-display:not(.material-symbols-outlined) {
    font-family: var(--font-display) !important;
}

/* Slogan/Tagline font */
.font-slogan {
    font-family: var(--font-slogan) !important;
}

/* ============================================
   BRAND GRADIENT UTILITY CLASSES
   ============================================ */

.bg-brand-gradient {
    background: var(--brand-gradient) !important;
}

.bg-brand-gradient-light {
    background: var(--brand-gradient-light) !important;
}

.bg-brand-gradient-soft {
    background: var(--brand-gradient-soft) !important;
}

/* ============================================
   BRAND COLOR UTILITY CLASSES
   ============================================ */

.text-brand-primary {
    color: var(--brand-primary) !important;
}

.text-brand-primary-dark {
    color: var(--brand-primary-dark) !important;
}

.text-brand-accent-green {
    color: var(--brand-accent-green) !important;
}

.bg-brand-primary {
    background-color: var(--brand-primary) !important;
}

.bg-brand-primary-dark {
    background-color: var(--brand-primary-dark) !important;
}

.border-brand-primary {
    border-color: var(--brand-primary) !important;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

@media (max-width: 768px) {
    :root {
        --font-size-hero: 2.5rem;    /* 40px on mobile */
        --font-size-h1: 2rem;        /* 32px on mobile */
        --font-size-h2: 1.5rem;      /* 24px on mobile */
    }
}

/* ============================================
   BRAND INSTRUCTIONS
   ============================================ */

/*
 * HOW TO UPDATE BRAND ELEMENTS:
 *
 * 1. CHANGE FONTS:
 *    - Update font files in public/fonts/
 *    - Update @font-face declarations above
 *    - Update --font-display, --font-body, --font-slogan variables
 *
 * 2. CHANGE COLORS:
 *    - Update --brand-* color variables in :root
 *    - Colors will automatically update across entire website
 *
 * 3. CHANGE GRADIENTS:
 *    - Update --brand-gradient variables in :root
 *    - All gradient backgrounds will update automatically
 *
 * 4. CHANGE TYPOGRAPHY SIZES:
 *    - Update --font-size-* variables in :root
 *    - Responsive breakpoints are defined in @media queries
 *
 * NO CODE CHANGES REQUIRED - Just update this file!
 */