/*
 * ============================================================
 *  DESIGN SYSTEM – Global Typography & Design Tokens
 *  Font: Cambria (system serif – no CDN needed)
 *  Scope: All public pages (user, embassy, service wizard)
 * ============================================================
 */

/* ── Google Font (Lora) for richer Vietnamese glyph support ── */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    /* ── Brand colours ── */
    --ds-navy:        #00154d;
    --ds-navy-mid:    #0b2a63;
    --ds-navy-light:  #e8eef7;
    --ds-blue:        #1e4db7;
    --ds-red:         #da251d;
    --ds-gold:        #c89418;
    --ds-gold-light:  #fdf6e3;
    --ds-success:     #168148;
    --ds-warning:     #94640d;
    --ds-danger:      #c7352d;

    /* ── Neutrals ── */
    --ds-bg:          #f5f8fc;
    --ds-surface:     #ffffff;
    --ds-border:      rgba(0, 21, 77, 0.13);
    --ds-border-md:   rgba(0, 21, 77, 0.22);
    --ds-text:        #0c2344;
    --ds-text-muted:  #486284;
    --ds-text-faint:  #8494aa;

    /* ── Type scale ── */
    --fs-xs:    11px;   /* micro labels, timestamps          */
    --fs-sm:    13px;   /* helper text, captions, meta       */
    --fs-base:  15px;   /* body / default                    */
    --fs-md:    16px;   /* form labels, table cells          */
    --fs-lg:    18px;   /* card titles, sub-headings         */
    --fs-xl:    20px;   /* section headings                  */
    --fs-2xl:   24px;   /* page titles, modal headings       */
    --fs-3xl:   28px;   /* hero headlines                    */
    --fs-4xl:   36px;   /* landing hero                      */

    /* ── Line heights ── */
    --lh-tight:  1.2;
    --lh-snug:   1.35;
    --lh-base:   1.55;
    --lh-relax:  1.7;

    /* ── Font weights ── */
    --fw-normal:    400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    /* ── Font stacks ── */
    --font-serif: Cambria, 'Lora', Georgia, 'Times New Roman', serif;
    --font-sans:  'Plus Jakarta Sans', 'Be Vietnam Pro', 'Inter', Arial, sans-serif;

    /* ── Spacing tokens ── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* ── Radius ── */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-full: 999px;

    /* ── Shadows ── */
    --shadow-sm:  0 2px 8px rgba(0, 21, 77, 0.06);
    --shadow-md:  0 10px 30px rgba(0, 21, 77, 0.09);
    --shadow-lg:  0 22px 55px rgba(0, 21, 77, 0.11);
}

/* ─────────────────────────────────────────────
   GLOBAL BASE — Cambria on everything
   ───────────────────────────────────────────── */
html {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

body,
body * {
    font-family: var(--font-serif) !important;
}

/* ─────────────────────────────────────────────
   HEADING SCALE
   ───────────────────────────────────────────── */
h1, .ds-h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold);     line-height: var(--lh-tight); color: var(--ds-navy); }
h2, .ds-h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold);     line-height: var(--lh-snug);  color: var(--ds-navy); }
h3, .ds-h3 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); line-height: var(--lh-snug);  color: var(--ds-navy); }
h4, .ds-h4 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); line-height: var(--lh-snug);  color: var(--ds-text); }
h5, .ds-h5 { font-size: var(--fs-md);  font-weight: var(--fw-semibold); color: var(--ds-text); }
h6, .ds-h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ─────────────────────────────────────────────
   TEXT UTILITIES
   ───────────────────────────────────────────── */
.ds-text-xs    { font-size: var(--fs-xs);   line-height: var(--lh-snug); }
.ds-text-sm    { font-size: var(--fs-sm);   line-height: var(--lh-base); }
.ds-text-base  { font-size: var(--fs-base); line-height: var(--lh-base); }
.ds-text-md    { font-size: var(--fs-md);   line-height: var(--lh-base); }
.ds-text-lg    { font-size: var(--fs-lg);   line-height: var(--lh-snug); }
.ds-text-xl    { font-size: var(--fs-xl);   line-height: var(--lh-snug); }
.ds-text-2xl   { font-size: var(--fs-2xl);  line-height: var(--lh-tight); }
.ds-text-3xl   { font-size: var(--fs-3xl);  line-height: var(--lh-tight); }

.ds-fw-normal   { font-weight: var(--fw-normal); }
.ds-fw-medium   { font-weight: var(--fw-medium); }
.ds-fw-semibold { font-weight: var(--fw-semibold); }
.ds-fw-bold     { font-weight: var(--fw-bold); }

.ds-text-navy    { color: var(--ds-navy); }
.ds-text-muted   { color: var(--ds-text-muted); }
.ds-text-faint   { color: var(--ds-text-faint); }
.ds-text-danger  { color: var(--ds-danger); }
.ds-text-success { color: var(--ds-success); }

/* ─────────────────────────────────────────────
   FORMS — unified size + Cambria
   ───────────────────────────────────────────── */
input,
select,
textarea,
.form-control {
    font-family: var(--font-serif) !important;
    font-size: var(--fs-base) !important;
    line-height: var(--lh-base);
    color: var(--ds-text);
    border: 1.5px solid var(--ds-border) !important;
    border-radius: var(--r-md) !important;
    background: var(--ds-surface);
    min-height: 42px;
    padding: 9px 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--ds-navy) !important;
    box-shadow: 0 0 0 3px rgba(0, 21, 77, 0.09) !important;
    outline: none;
}

label,
.form-label {
    font-family: var(--font-serif) !important;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ds-text-muted);
    margin-bottom: var(--sp-1);
}

/* ─────────────────────────────────────────────
   BUTTONS — unified size + Cambria
   ───────────────────────────────────────────── */
button,
.btn,
.btnCustom,
.btnCustom1,
.vd-btn,
a.bg-primary,
a.bg-secondary {
    font-family: var(--font-serif) !important;
    font-size: var(--fs-base) !important;
    font-weight: var(--fw-bold);
    min-height: 42px;
    padding: 10px 20px;
    border-radius: var(--r-md) !important;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* ─────────────────────────────────────────────
   TABLES — unified typography
   ───────────────────────────────────────────── */
table {
    font-family: var(--font-serif) !important;
    font-size: var(--fs-base);
    color: var(--ds-text);
}

th {
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-bold) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-navy) !important;
    padding: 12px 14px;
    white-space: nowrap;
}

td {
    font-size: var(--fs-base);
    color: var(--ds-text);
    padding: 11px 14px;
    vertical-align: middle;
}

/* ─────────────────────────────────────────────
   OVERRIDE Tailwind inline font-family classes
   e.g. font-['Plus Jakarta Sans'], font-['Public Sans']
   ───────────────────────────────────────────── */
[class*="font-["] {
    font-family: var(--font-serif) !important;
}

/* ─────────────────────────────────────────────
   USER DASHBOARD — font override + type sync
   ───────────────────────────────────────────── */
.user-dashboard,
.user-dashboard * {
    font-family: var(--font-serif) !important;
}
.ud-card-title    { font-size: var(--fs-lg);  font-weight: var(--fw-bold); }
.ud-card-subtitle { font-size: var(--fs-sm);  color: var(--ds-text-muted); }
.ud-stat-value    { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.ud-stat-label    { font-size: var(--fs-xs);  text-transform: uppercase; letter-spacing: 0.08em; }
.ud-table-head    { font-size: var(--fs-sm);  font-weight: var(--fw-bold); }
.ud-table-cell    { font-size: var(--fs-base); }
.ud-badge         { font-size: var(--fs-xs);  font-weight: var(--fw-semibold); padding: 3px 9px; border-radius: var(--r-full); }
.ud-section-title { font-size: var(--fs-xl);  font-weight: var(--fw-bold); color: var(--ds-navy); }
.ud-meta          { font-size: var(--fs-sm);  color: var(--ds-text-muted); }

/* ─────────────────────────────────────────────
   SERVICE WIZARD — font override + type sync
   ───────────────────────────────────────────── */
.vd-wizard-page,
.vd-wizard-page * {
    font-family: var(--font-serif) !important;
}
.vd-page-head h1        { font-size: var(--fs-2xl); }
.vd-card h3             { font-size: var(--fs-lg); }
.vd-card p              { font-size: var(--fs-base); }
.vd-section-label       { font-size: var(--fs-xs); }
.vd-step strong         { font-size: var(--fs-sm); }
.vd-step small          { font-size: var(--fs-xs); }
.vd-upload-title        { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.vd-guide-box           { font-size: var(--fs-sm); }
.vd-price-line          { font-size: var(--fs-base); }
.vd-price-total strong  { font-size: var(--fs-lg); }
.vd-summary-card h4     { font-size: var(--fs-xs); }
.vd-summary-card strong { font-size: var(--fs-base); }
.vd-field               { font-size: var(--fs-sm); }
.vd-btn                 { font-size: var(--fs-base) !important; }

/* ─────────────────────────────────────────────
   EMBASSY & ADMIN page headings
   ───────────────────────────────────────────── */
.layout-default > h1,
.layout-default > h2 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--ds-navy);
    margin-bottom: var(--sp-4);
}
.page-header,
.page-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--ds-navy);
}

/* ─────────────────────────────────────────────
   NAVIGATION
   ───────────────────────────────────────────── */
nav a,
.navbar-nav a,
header a {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
}

/* ─────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────── */
@media print {
    body { font-size: 12px; font-family: Cambria, Georgia, serif !important; }
}