/**
 * dSuite Typography System — applied globally to dcardapp
 * Primary: Inter | Secondary: Poppins | Brand: Montserrat
 */

/* ============================================================
   Typography Scale Variables
   ============================================================ */
:root {
    /* Font families */
    --font-base:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading:'Poppins', 'Inter', -apple-system, sans-serif;
    --font-brand:  'Montserrat', 'Poppins', Arial, sans-serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* Size scale */
    --text-xs:   0.625rem;   /* 10px */
    --text-sm:   0.75rem;    /* 12px */
    --text-base: 0.875rem;   /* 14px */
    --text-md:   0.9375rem;  /* 15px */
    --text-lg:   1rem;       /* 16px */
    --text-xl:   1.125rem;   /* 18px */
    --text-2xl:  1.25rem;    /* 20px */
    --text-3xl:  1.5rem;     /* 24px */
    --text-4xl:  1.875rem;   /* 30px */

    /* Weight aliases */
    --fw-light:   300;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;
    --fw-extrabold:800;

    /* Line heights */
    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.5;
    --leading-relaxed:1.65;

    /* Letter spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-wider:  0.08em;
    --tracking-widest: 0.14em;
}

/* ============================================================
   Base HTML & Body
   ============================================================ */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    font-size: var(--text-sm);       /* 12px — dSuite compact default */
    font-weight: var(--fw-regular);
    line-height: var(--leading-normal);
    color: var(--text, #111827);
    background: var(--bg, #f5f6fa);
    letter-spacing: var(--tracking-normal);
}

/* ============================================================
   Headings
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-tight);
    color: var(--text, #111827);
    margin-bottom: 0.75rem;
    letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-2xl);  font-weight: var(--fw-bold); }    /* 20px */
h2 { font-size: var(--text-xl);   font-weight: var(--fw-semibold); } /* 18px */
h3 { font-size: var(--text-lg);   font-weight: var(--fw-semibold); } /* 16px */
h4 { font-size: var(--text-base); font-weight: var(--fw-semibold); } /* 14px */
h5 { font-size: var(--text-sm);   font-weight: var(--fw-semibold); } /* 12px */
h6 { font-size: var(--text-xs);   font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* 10px */

/* ============================================================
   Body Text
   ============================================================ */
p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-light, #6b7280);
    margin-bottom: 0.75rem;
}

small, .text-xs  { font-size: var(--text-xs)  !important; }  /* 10px */
.text-sm         { font-size: var(--text-sm)   !important; }  /* 12px */
.text-base       { font-size: var(--text-base) !important; }  /* 14px */
.text-lg         { font-size: var(--text-lg)   !important; }  /* 16px */
.text-xl         { font-size: var(--text-xl)   !important; }  /* 18px */

/* ============================================================
   Links
   ============================================================ */
a {
    font-size: inherit;
    font-weight: inherit;
    color: var(--primary, #ff5b74);
    text-decoration: none;
    transition: color 150ms ease;
}
a:hover { color: var(--primary-dark, #e04060); text-decoration: none; }

/* ============================================================
   Labels & Form Elements
   ============================================================ */
label {
    font-size: var(--text-xs);         /* 10px — very compact dSuite labels */
    font-weight: var(--fw-semibold);
    color: var(--text, #111827);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

input, select, textarea, button {
    font-family: var(--font-base);
    font-size: var(--text-sm);         /* 12px */
    line-height: var(--leading-normal);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    font-family: var(--font-base);
    font-size: var(--text-sm);
    color: var(--text, #111827);
}

/* ============================================================
   Buttons
   ============================================================ */
button,
.btn,
[class*="btn-"] {
    font-family: var(--font-base);
    font-size: var(--text-xs);         /* 10px — very compact buttons */
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wide);
}

/* ============================================================
   Tables
   ============================================================ */
table, th, td {
    font-family: var(--font-base);
}

th {
    font-size: var(--text-xs);         /* 10px */
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted, #9ca3af);
}

td {
    font-size: var(--text-sm);         /* 12px */
    color: var(--text, #111827);
}

/* ============================================================
   Cards & Panels — title/meta text
   ============================================================ */
.card-title,
.ds-card-title,
.panel-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);       /* 14px */
    font-weight: var(--fw-semibold);
    color: var(--text, #111827);
    letter-spacing: var(--tracking-tight);
}

.card-subtitle,
.ds-card-subtitle,
.panel-subtitle {
    font-size: var(--text-xs);         /* 10px */
    font-weight: var(--fw-regular);
    color: var(--text-muted, #9ca3af);
    letter-spacing: var(--tracking-normal);
}

/* ============================================================
   Badges / Tags
   ============================================================ */
.badge,
[class*="badge-"],
.ds-badge {
    font-size: var(--text-xs);         /* 10px */
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-base);
}

/* ============================================================
   Section / Page Headers
   ============================================================ */
.page-title,
.ds-page-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);         /* 18px */
    font-weight: var(--fw-bold);
    color: var(--text, #111827);
    letter-spacing: var(--tracking-tight);
}

.section-label,
.ds-section-label,
.nav-section-label {
    font-size: var(--text-xs);         /* 10px */
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted, #9ca3af);
}

/* ============================================================
   KPI / Stat Numbers
   ============================================================ */
.kpi-value,
.stat-value,
.ds-kpi-value {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);        /* 24px */
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

.kpi-label,
.stat-label,
.ds-kpi-label {
    font-size: var(--text-xs);         /* 10px */
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted, #9ca3af);
}

/* ============================================================
   Navigation (header bar)
   ============================================================ */
.ds-header,
.ds-header * {
    font-family: var(--font-base);
}

.ds-header-brand-name {
    font-family: var(--font-brand);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
}

/* ============================================================
   Footer
   ============================================================ */
.ds-footer,
.ds-footer * {
    font-family: var(--font-base);
}

.ds-footer-heading {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
}

.ds-footer-links a,
.ds-footer-tagline,
.ds-footer-powered {
    font-size: var(--text-xs);         /* 10px */
}

/* ============================================================
   Alerts / Notifications
   ============================================================ */
.alert,
[class*="alert-"] {
    font-size: var(--text-sm);
    font-family: var(--font-base);
}

/* ============================================================
   Code / Mono
   ============================================================ */
code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* ============================================================
   Utility helpers (weight)
   ============================================================ */
.fw-light    { font-weight: var(--fw-light)    !important; }
.fw-regular  { font-weight: var(--fw-regular)  !important; }
.fw-medium   { font-weight: var(--fw-medium)   !important; }
.fw-semibold { font-weight: var(--fw-semibold) !important; }
.fw-bold     { font-weight: var(--fw-bold)     !important; }