:root {
    /* Core Figma Colors */
    --pd-white: #FFFFFF;
    --pd-cream: #FDF6EE;
    --pd-tan: #F4DFCD;
    --pd-sage: #AFC4A2;
    --pd-deep-green: #164E3D;
    --pd-black: #1E1E1E;
    --pd-grey: #5A5A5A;

    /* Gradients */
    --pd-bg-gradient: linear-gradient(180.49deg, #FFFFFF 0.42%, #FEF9F3 43.25%, #FEF9F3 71.39%, #FEFDFC 88.57%);
    --pd-card-gradient: linear-gradient(180.59deg, #FFFFFF 41.9%, #E9F4E2 99.48%);

    /* Typography */
    --pd-font-serif: 'Noto Serif SC', serif;
    --pd-font-sans: 'Open Sans', sans-serif;

    /* Font Sizes - Desktop */
    --pd-h1-size: 48px;
    --pd-h2-size: 36px;
    --pd-h3-size: 24px;
    --pd-body-l-size: 17px;
    --pd-body-m-size: 15px;
    --pd-body-s-size: 13px;
    --pd-caption-size: 11px;
}

/* Global Figma Styles */
.pd-figma-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.pd-figma-h1 {
    font-family: var(--pd-font-serif);
    font-size: var(--pd-h1-size);
    font-weight: 600;
    line-height: 1.1;
    color: var(--pd-black);
}

.pd-figma-h2 {
    font-family: var(--pd-font-serif);
    font-size: var(--pd-h2-size);
    font-weight: 600;
    line-height: 1.2;
    color: var(--pd-black);
}

.pd-figma-body {
    font-family: var(--pd-font-sans);
    font-size: var(--pd-body-m-size);
    line-height: 1.6;
    color: var(--pd-black);
}

.pd-figma-label {
    font-family: var(--pd-font-sans);
    font-size: var(--pd-caption-size);
    font-weight: 700;
    color: var(--pd-grey);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}