/**
 * Design Tokens — PPs Undana
 *
 * Sumber: DESIGN.md (Google Stitch export).
 * Semua nilai di bawah ini adalah sumber kebenaran tunggal untuk styling.
 * Ubah di sini saja; file lain merujuk variabel ini.
 */
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../libs/fonts/source-serif-4-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../libs/fonts/source-serif-4-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../libs/fonts/hanken-grotesk-400.ttf') format('truetype');
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../libs/fonts/hanken-grotesk-500.ttf') format('truetype');
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../libs/fonts/hanken-grotesk-600.ttf') format('truetype');
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../libs/fonts/hanken-grotesk-700.ttf') format('truetype');
}

:root {
    /* ── Brand ─────────────────────────────────────────────── */
    --pps-primary: #1B7A3E;
    --pps-primary-dark: #0F5A2C;
    --pps-primary-deep: #00602b;
    --pps-accent: #F5C518;
    --pps-accent-soft: #FFF3CC;
    --pps-primary-container: #1b7a3e;
    --pps-on-primary: #ffffff;
    --pps-on-primary-container: #abffb9;
    --pps-primary-fixed: #9bf7ad;
    --pps-primary-fixed-variant: #80da93;

    /* ── Surfaces ──────────────────────────────────────────── */
    --pps-bg: #F9F9F9;
    --pps-surface: #FFFFFF;
    --pps-surface-low: #F3F3F3;
    --pps-surface-container: #eeeeee;
    --pps-surface-container-high: #e8e8e8;
    --pps-border: #E0E0E0;

    /* ── Text ──────────────────────────────────────────────── */
    --pps-text: #1A1A1A;
    --pps-text-variant: #3F493F;

    /* ── Secondary palette ─────────────────────────────────── */
    --pps-secondary: #256b3b;
    --pps-secondary-container: #a7f1b4;
    --pps-on-secondary-container: #2a703f;

    /* ── Tertiary / Accent ─────────────────────────────────── */
    --pps-tertiary: #745b00;
    --pps-tertiary-container: #d0a600;
    --pps-tertiary-fixed: #ffe08b;
    --pps-on-tertiary-container: #4f3d00;

    /* ── Inverse ───────────────────────────────────────────── */
    --pps-inverse-surface: #2f3131;
    --pps-inverse-on-surface: #f1f1f1;

    /* ── Outline ───────────────────────────────────────────── */
    --pps-outline: #6f7a6e;
    --pps-outline-variant: #becabc;

    /* ── Radius ────────────────────────────────────────────── */
    --pps-radius-xs: 0.25rem;
    --pps-radius-sm: 0.5rem;
    --pps-radius-md: 0.75rem;
    --pps-radius-lg: 1rem;
    --pps-radius-xl: 1.5rem;
    --pps-radius-full: 9999px;

    /* ── Spacing (8px base) ────────────────────────────────── */
    --pps-sp-xs: 4px;
    --pps-sp-sm: 12px;
    --pps-sp-md: 24px;
    --pps-sp-lg: 48px;
    --pps-sp-xl: 80px;
    --pps-sp-gutter: 24px;
    --pps-sp-margin-mobile: 16px;
    --pps-sp-margin-desktop: 64px;

    /* ── Typography ────────────────────────────────────────── */
    --pps-font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --pps-font-body: 'Hanken Grotesk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* ── Elevation / Shadows ───────────────────────────────── */
    --pps-shadow-1: 0 2px 4px rgba(0, 0, 0, 0.05);
    --pps-shadow-2: 0 8px 16px rgba(15, 90, 44, 0.08);
    --pps-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
}