/* ============================================
   THÁNHCA.NET - Design Tokens v60
   Purple/Gold Catholic Theme
   ============================================ */

:root {
    --font-primary: 'Inter', 'Segoe UI', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-body: var(--font-primary);
    --font-display: 'Playfair Display', 'Noto Serif', Georgia, 'Times New Roman', serif;

    /* === FLUID TYPOGRAPHY === */
    --fs-xs:   clamp(0.625rem, 0.58rem + 0.18vw, 0.75rem);   /* ~10-12px */
    --fs-sm:   clamp(0.72rem,  0.67rem + 0.22vw, 0.86rem);   /* ~11.5-13.8px */
    --fs-base: clamp(0.82rem,  0.76rem + 0.27vw, 1rem);      /* ~13-16px */
    --fs-md:   clamp(0.95rem,  0.88rem + 0.32vw, 1.15rem);   /* ~15-18.4px */
    --fs-lg:   clamp(1.1rem,   1rem + 0.45vw, 1.4rem);       /* ~17.6-22.4px */
    --fs-xl:   clamp(1.3rem,   1.15rem + 0.68vw, 1.8rem);    /* ~20.8-28.8px */
    --fs-2xl:  clamp(1.6rem,   1.3rem + 1.36vw, 2.5rem);     /* ~25.6-40px */

    /* === PURPLE PALETTE === */
    --purple-darkest: #1e0a3c;
    --purple-dark:    #3d2066;
    --purple:         #6b4696;
    --purple-mid:     #8b5eb8;
    --purple-light:   #b08ad4;
    --purple-pale:    #e8dff5;

    /* === GOLD === */
    --gold:           #c8963c;
    --gold-light:     #deb06a;
    --gold-pale:      #f5e8c8;

    /* === BACKGROUNDS === */
    --bg-app:         #f0eaf8;
    --bg-header:      rgba(45,14,80,.82);
    --bg-sidebar:     rgba(38,12,68,.88);
    --bg-card:        rgba(255,255,255,.96);
    --bg-card-hover:  rgba(255,255,255,1);
    --bg-hover:       rgba(107,70,150,.06);

    /* === TEXT === */
    --text-primary:   #2d1b4e;
    --text-secondary: #5a4a6e;
    --text-muted:     #8a7d9b;

    /* === CATEGORY COLORS === */
    --cat-nhap-le:    #4a90d9;
    --cat-dap-ca:     #27ae60;
    --cat-dang-le:    #e67e22;
    --cat-hiep-le:    #8e44ad;
    --cat-ket-le:     #e74c3c;
    --cat-ca-tiep:    #d35400;
    --cat-b02:        #7f8c8d;

    /* === BORDERS === */
    --border-light:   rgba(107,70,150,.1);
    --border-medium:  rgba(107,70,150,.18);

    /* === SHADOWS === */
    --shadow-sm:      0 2px 8px rgba(61,32,102,.08);
    --shadow-md:      0 4px 16px rgba(61,32,102,.12);
    --shadow-lg:      0 8px 32px rgba(61,32,102,.18);

    /* === SPACING === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* === LAYOUT === */
    --sidebar-w:     200px;
    --rsidebar-w:    240px;
    --header-h:      100px;
    --footer-h:      38px;

    /* === EXTRA === */
    --purple-dark:   #3d2066;
    --purple-gradient: linear-gradient(135deg,#3d2066,#6b4696);

    /* === TRANSITIONS === */
    --ease: cubic-bezier(.4,0,.2,1);
    --tr: .2s var(--ease);
}