:root{
/* ---- Brand palette (source of truth: logo SVG fill + brand deck swatch slide) ---- */
--palmera-driftwood:#312B1F; /* primary dark neutral — ink, primary buttons, wordmark on light */
--palmera-sand:#B8AFA6;      /* light neutral — alternating sections, cards, callouts */
--palmera-deep-ocean:#02242D;/* deep accent — footer, dark bands, closing CTA */
--palmera-palm:#7B7251;      /* warm accent — rules, hover, small details. Use sparingly */
--palmera-shell:#EBF2EB;     /* lightest neutral — default page background */
--palmera-white:#FFFFFF;     /* card/content surfaces only, never the page background */

/* ---- Tonal steps, derived in oklch from the five brand colors. Interface use only
        (borders, hovers, disabled states) — never presented as brand colors. ---- */
--driftwood-900:oklch(from var(--palmera-driftwood) calc(l * .72) c h);
--driftwood-700:var(--palmera-driftwood);
--driftwood-500:oklch(from var(--palmera-driftwood) calc(l * 1.5) c h);
--driftwood-300:oklch(from var(--palmera-driftwood) calc(l * 2.35) calc(c * .8) h);
--driftwood-100:oklch(from var(--palmera-driftwood) calc(l * 3.15) calc(c * .45) h);
--sand-600:oklch(from var(--palmera-sand) calc(l * .78) c h);
--sand-500:var(--palmera-sand);
--sand-300:oklch(from var(--palmera-sand) calc(l * 1.09) calc(c * .8) h);
--sand-100:oklch(from var(--palmera-sand) calc(l * 1.19) calc(c * .5) h);
--palm-600:oklch(from var(--palmera-palm) calc(l * .82) c h);
--palm-500:var(--palmera-palm);
--palm-300:oklch(from var(--palmera-palm) calc(l * 1.28) calc(c * .7) h);
--deep-ocean-700:oklch(from var(--palmera-deep-ocean) calc(l * .7) c h);
--deep-ocean-500:var(--palmera-deep-ocean);
--deep-ocean-300:oklch(from var(--palmera-deep-ocean) calc(l * 1.9) c h);

/* ---- Semantic surfaces ---- */
--surface-page:var(--palmera-shell);
--surface-alt:var(--palmera-sand);          /* alternating section band */
--surface-alt-soft:var(--sand-100);         /* quieter alternating band */
--surface-card:var(--palmera-white);
--surface-card-alt:var(--palmera-sand);
--surface-inverse:var(--palmera-deep-ocean);/* footer, dark closing section */
--surface-inverse-alt:var(--palmera-driftwood);
--surface-scrim:color-mix(in oklch, var(--palmera-driftwood) 55%, transparent);

/* ---- Semantic text ---- */
--text-body:var(--palmera-driftwood);
--text-heading:var(--palmera-driftwood);
--text-muted:oklch(from var(--palmera-driftwood) calc(l * 1.75) calc(c * .85) h);
--text-accent:var(--palmera-palm);
--text-on-inverse:var(--palmera-shell);
--text-on-inverse-muted:color-mix(in oklch, var(--palmera-shell) 68%, var(--palmera-deep-ocean));
--text-on-accent:var(--palmera-shell);
--text-link:var(--palmera-driftwood);
--text-link-hover:var(--palmera-palm);

/* ---- Borders & rules ---- */
--border-hairline:color-mix(in oklch, var(--palmera-driftwood) 16%, transparent);
--border-strong:var(--palmera-driftwood);
--border-accent:var(--palmera-palm);
--border-on-inverse:color-mix(in oklch, var(--palmera-shell) 26%, transparent);

/* ---- Interactive ---- */
--action-primary-bg:var(--palmera-driftwood);
--action-primary-bg-hover:var(--driftwood-900);
--action-primary-text:var(--palmera-shell);
--action-secondary-border:var(--palmera-palm);
--action-secondary-text:var(--palmera-palm);
--action-secondary-bg-hover:color-mix(in oklch, var(--palmera-palm) 10%, transparent);
--action-inverse-bg:var(--palmera-shell);
--action-inverse-text:var(--palmera-deep-ocean);
--focus-ring:var(--palmera-palm);

/* ---- Status. Palmera has no approved semantic palette; these are derived from the
        brand colors so form feedback never introduces a foreign hue. ---- */
--status-error:oklch(from var(--palmera-driftwood) .44 .11 34);
--status-success:var(--palmera-palm);
--status-info:var(--palmera-deep-ocean);
}