/* ===================================
   YP UNIVERSAL DESIGN SYSTEM
   =================================== */

.yp-styles{

    /* Colors */
    --yp-primary:#2563eb;
    --yp-primary-hover:#1d4ed8;

    --yp-bg:#ffffff;
    --yp-bg-soft:#f8fafc;

    --yp-text:#1f2937;
    --yp-text-light:#6b7280;

    --yp-border:#e5e7eb;

    /* Radius */
    --yp-radius-sm:6px;
    --yp-radius:12px;
    --yp-radius-lg:18px;

    /* Shadow */
    --yp-shadow:
        0 4px 12px rgba(0,0,0,.08);

    /* Typography */
    --yp-font:
        system-ui,
        -apple-system,
        sans-serif;

    --yp-line-height:1.8;

    /* Spacing */
    --yp-space-xs:6px;
    --yp-space-sm:12px;
    --yp-space-md:20px;
    --yp-space-lg:30px;

    font-family:var(--yp-font);
    color:var(--yp-text);
    line-height:var(--yp-line-height);
}

/* Reset */

.yp-styles *,
.yp-styles *::before,
.yp-styles *::after{
    box-sizing:border-box;
}

/* =================
   HEADINGS
   ================= */

.yp-styles h1,
.yp-styles h2,
.yp-styles h3,
.yp-styles h4,
.yp-styles h5,
.yp-styles h6{
    color:var(--yp-text);
    margin:
        var(--yp-space-lg)
        0
        var(--yp-space-md);
    line-height:1.4;
    font-weight:700;
}

.yp-styles h1{
    font-size:2rem;
}

.yp-styles h2{
    font-size:1.6rem;
    border-left:5px solid var(--yp-primary);
    padding-left:12px;
}

.yp-styles h3{
    font-size:1.35rem;
}

/* =================
   PARAGRAPH
   ================= */

.yp-styles p{
    margin:var(--yp-space-md) 0;
    color:var(--yp-text-light);
}

/* =================
   LINKS
   ================= */

.yp-styles a{
    color:var(--yp-primary);
    text-decoration:none;
    font-weight:600;
}

.yp-styles a:hover{
    color:var(--yp-primary-hover);
    text-decoration:underline;
}

/* =================
   BUTTONS
   ================= */

.yp-styles button,
.yp-styles .btn,
.yp-styles input[type=button],
.yp-styles input[type=submit]{

    background:var(--yp-primary);
    color:#fff;

    border:none;

    padding:
        12px
        20px;

    border-radius:
        var(--yp-radius);

    cursor:pointer;

    transition:.3s;
}

.yp-styles button:hover{
    background:
        var(--yp-primary-hover);
}

/* =================
   FORM
   ================= */

.yp-styles input,
.yp-styles textarea,
.yp-styles select{

    width:100%;

    padding:12px;

    border:
        1px solid
        var(--yp-border);

    border-radius:
        var(--yp-radius-sm);

    background:
        var(--yp-bg);
}

/* =================
   TABLE
   ================= */

.yp-styles table{

    width:100%;

    border-collapse:collapse;

    background:
        var(--yp-bg);

    border-radius:
        var(--yp-radius);

    overflow:hidden;

    box-shadow:
        var(--yp-shadow);

    margin:
        var(--yp-space-md)
        0;
}

.yp-styles th{

    background:
        var(--yp-primary);

    color:#fff;

    padding:12px;
}

.yp-styles td{

    padding:12px;

    border:
        1px solid
        var(--yp-border);
}

/* =================
   LIST
   ================= */

.yp-styles ul,
.yp-styles ol{

    padding-left:25px;
}

.yp-styles li{

    margin:
        var(--yp-space-xs)
        0;
}

/* =================
   CARD DIV
   ================= */

.yp-styles > div{

    background:
        var(--yp-bg);

    border:
        1px solid
        var(--yp-border);

    border-radius:
        var(--yp-radius);

    padding:
        var(--yp-space-md);

    margin:
        var(--yp-space-md)
        0;
}

/* =================
   IMAGE
   ================= */

.yp-styles img{

    max-width:100%;

    height:auto;

    display:block;

    border-radius:
        var(--yp-radius);

    box-shadow:
        var(--yp-shadow);
}

/* =================
   BLOCKQUOTE
   ================= */

.yp-styles blockquote{

    background:
        var(--yp-bg-soft);

    border-left:
        5px solid
        var(--yp-primary);

    padding:
        var(--yp-space-md);

    border-radius:
        var(--yp-radius-sm);
}

/* =================
   CODE
   ================= */

.yp-styles code{

    background:
        var(--yp-bg-soft);

    padding:
        3px 6px;

    border-radius:
        4px;
}

.yp-styles pre{

    background:#111827;

    color:#fff;

    padding:
        var(--yp-space-md);

    border-radius:
        var(--yp-radius);

    overflow:auto;
}