/**
 * typography.css
 * Applies the branded font family and per-section sizes.
 *
 * The variables are injected at runtime by branding.js. Fallbacks here mean the
 * app still renders correctly before that fetch lands, or if branding fails.
 *
 * Loaded last so it wins over the per-page font rules that predate it.
 */

:root {
    --font-family: 'Montserrat', 'Segoe UI', sans-serif;
    --font-base: 13px;
    --font-body: 13px;
    --font-heading: 22px;
    --font-section-title: 15px;
    --font-label: 11px;
    --font-table: 12.5px;
    --font-sidebar: 13.5px;
    --font-stat-value: 26px;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-family);
}

body { font-size: var(--font-base); }

/* Body copy ---------------------------------------------------------- */
p,
.attendance-subtitle,
.records-page-copy,
.dashboard-stat-note,
.emp-stat-note,
.field-hint,
.lop-step span,
.policy-card-head p {
    font-size: var(--font-body);
}

/* Page headings ------------------------------------------------------ */
#app-content > h1,
#app-content h2,
.page-header h2,
.emp-dash-identity h2 {
    font-size: var(--font-heading);
}

/* Section / card titles ---------------------------------------------- */
h3,
.attendance-title,
.dashboard-section-head h3,
.brand-group-head strong,
.policy-card-head h4 {
    font-size: var(--font-section-title);
}

/* Labels, chips and small caps ---------------------------------------- */
label,
.dashboard-stat-label,
.emp-stat-label,
.att-tile-label,
.timing-facts label,
.emp-card-meta label,
.policy-category,
.emp-tag,
.brand-swatch-label,
.period-switch-label {
    font-size: var(--font-label);
}

/* Data tables --------------------------------------------------------- */
.hrms-table td,
.hrms-table th,
.emp-dash-list li,
.breakdown-list li,
.emp-timeline li {
    font-size: var(--font-table);
}

/* Sidebar navigation --------------------------------------------------- */
.sidebar-nav a { font-size: var(--font-sidebar); }

/* Large figures on tiles ------------------------------------------------ */
.dashboard-stat-value,
.emp-stat-value,
.att-tile-value,
.emp-card-count {
    font-size: var(--font-stat-value);
}

/* ------------------------------------------- typography editor UI --- */

.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.type-row {
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
}

.type-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.type-row-head strong { font-size: 12.5px; color: var(--text-primary); }

.type-value {
    font-family: monospace;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-text);
}

.type-row input[type="range"] { width: 100%; margin: 9px 0 4px; accent-color: var(--accent); }

.type-preview {
    flex: 1;
    min-width: 220px;
    padding: 13px 16px;
    border-radius: 11px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    align-self: flex-end;
}

.type-preview strong { display: block; font-size: 17px; color: var(--text-primary); }
.type-preview span { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 3px; }

/* ==================================================== Celebrations === */

.celebrate-grid { display: grid; gap: 12px; }

.celebrate-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-sunken);
    border-left: 4px solid var(--border-strong);
    flex-wrap: wrap;
}

.celebrate-card.tone-birthday { border-left-color: var(--violet); }
.celebrate-card.tone-festival { border-left-color: var(--warning); }
.celebrate-card.tone-weekend { border-left-color: var(--accent); }

.celebrate-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.celebrate-body { flex: 1; min-width: 160px; }
.celebrate-body strong { display: block; font-size: 14px; color: var(--text-primary); }
.celebrate-body span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 1px; }

.celebrate-body em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.celebrate-btn { white-space: nowrap; }
.celebrate-btn.is-sent { background: var(--success); opacity: .85; }
.celebrate-btn.is-failed { background: var(--danger); }