/* Joury Home — brand tokens
   Single source of truth for colors and typography.
   Change a value here and it propagates everywhere through CSS variables. */

:root {
    /* Brand palette */
    --color-areia:  #D3C7AD;   /* light beige (sand) */
    --color-azul:   #28374A;   /* dark blue */
    --color-terra:  #754437;   /* burnt earth (terracotta) */
    --color-verde:  #6B6751;   /* muted olive */

    /* Surface roles — what currently lives on the page */
    --bg-primary:    var(--color-areia);   /* page background */
    --bg-contrast:   var(--color-terra);   /* dark cards / CTA */
    --text-primary:  var(--color-terra);   /* default text on light bg */
    --text-on-dark:  var(--color-areia);   /* text on dark bg */
    --accent:        var(--color-terra);
    --border:        var(--color-terra);

    /* Typography */
    --font-brand: 'TikTok Sans', sans-serif;
}

/* Light backwards-compat: legacy hex values still scattered through inline
   styles fall back to the variables when used inside elements that opt in. */
.brand-bg          { background-color: var(--bg-primary); }
.brand-bg-contrast { background-color: var(--bg-contrast); color: var(--text-on-dark); }
.brand-text        { color: var(--text-primary); }
.brand-text-light  { color: var(--text-on-dark); }
.brand-border      { border-color: var(--border); }
.brand-accent      { color: var(--accent); }

/* Body baseline — guarantees brand font even where inline rules don't say so */
body, input, textarea, select, button {
    font-family: var(--font-brand);
}