:root{
    /* Palette */
    --bg: #ffffff;
    --fg: #0b0b0b;

    /* Accents */
    --accent: #20b2aa;        /* teal */
    --accent-ink: #17827c;    /* dark teal */
    --accent-warm: #ff7f50;   /* coral */
    --accent-brick: #b21f27;  /* fire brick */

    /* Secondary ("pop") accent */
    --accent-pop: #0b2239;    /* deep navy */
    --pop-rgb: 11, 34, 57;
    --cta-fg-pop: #fff;

    /* Section “paper tints” */
    --tint-teal: #d8f6f4;
    --tint-coral: #ffe5db;
    --tint-pop: #eef4fa;

    /* Hairlines */
    --hairline: rgba(11, 11, 11, 0.14);
    --hairline-strong: rgba(11, 11, 11, 0.22);

    /* CTA defaults */
    --cta-bg: var(--accent-ink);
    --cta-fg: #fff;
    --cta-border: var(--cta-bg);
    --cta-shadow: rgba(23, 130, 124, .26);
    --cta-bg-hover: var(--accent);
    --cta-fg-hover: var(--fg);
    --cta-border-hover: var(--cta-bg-hover);
    --cta-shadow-hover: rgba(32, 178, 170, .28);
}