:root {
    /* Core Figma Colors */
    --tdh-white: #FFFFFF;
    --tdh-cream: #F8F8F8;
    --tdh-tan: #E5E5E5;
    --tdh-sage: #C8962A;
    --tdh-deep-green: #2D2D2D;
    --tdh-black: #1A1A1A;
    --tdh-grey: #666666;

    /* Gradients */
    --tdh-bg-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
    --tdh-card-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);

    /* Typography */
    --tdh-font-serif: 'Inter', sans-serif;
    --tdh-font-sans: 'Open Sans', sans-serif;

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

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

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

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

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

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