:root {
    /* Brand */
    --dark:    #0a0a0c;
    --cream:   #f0ede6;
    --gold:    #e9c46a;
    --green:   #2a9d8f;
    --red:     #e63946;
    --dim:     #6a6a78;
    --border:  rgba(233, 196, 106, 0.15);

    /* Typography */
    --mono:  'JetBrains Mono', 'Roboto Mono', monospace;
    --serif: 'Literata', Georgia, serif;

    /* Spacing */
    --ht-space-xs:  0.25rem;
    --ht-space-sm:  0.5rem;
    --ht-space-md:  1rem;
    --ht-space-lg:  1.5rem;
    --ht-space-xl:  2rem;
    --ht-space-2xl: 3rem;

    /* Radius */
    --ht-radius-sm:   0.25rem;
    --ht-radius-md:   0.5rem;
    --ht-radius-lg:   0.75rem;
    --ht-radius-pill: 999px;

    /* honest-page surface tokens */
    --ht-color-bg-primary:       var(--dark);
    --ht-color-bg-secondary:     #111114;
    --ht-color-bg-surface:       #18181c;
    --ht-color-text-primary:     var(--cream);
    --ht-color-text-secondary:   #c8c4bc;
    --ht-color-text-muted:       var(--dim);
    --ht-color-border:           var(--border);
    --ht-color-border-strong:    rgba(233, 196, 106, 0.3);
    --ht-color-accent:           var(--gold);
    --ht-color-accent-text:      var(--dark);
    --ht-color-success:          var(--green);
    --ht-color-warning:          #f4a261;
    --ht-color-danger:           var(--red);
    --ht-color-info:             #457b9d;

    /* Font sizes */
    --ht-font-size-sm:  0.75rem;
    --ht-font-size-md:  1rem;
    --ht-font-size-lg:  1.125rem;
    --ht-font-size-xl:  1.25rem;
    --ht-font-size-2xl: 1.5rem;
}