/* ————————————————————————————————————————————————————————
   01 — VARIABLES
   Design tokens — colors, spacing, and CSS custom properties
   ———————————————————————————————————————————————————————— */

:root {

    /* ————————————————————————————————————————————————————————
       COLORS — Brand & UI
       ———————————————————————————————————————————————————————— */
    --adreams-primary: #CB273D;
    /* dominant — use with confidence */
    --adreams-secondary: #F16D53;
    /* warm accent, use sparingly */
    --adreams-text: #01102A;
    /* body text on light */
    --adreams-accent: #10B981;
    /* green — data, success, highlights */
    --adreams-primary-light: #FDE8E4;
    /* tinted bg on light sections */
    --adreams-text-muted: #4B5563;
    --adreams-text-light: #9CA3AF;
    --adreams-white: #FFFFFF;
    --adreams-surface: #F9FAFB;
    /* light section bg */
    --adreams-border: #E5E7EB;
    /* borders on light */
    --adreams-dark-bg: #0F0F0F;
    /* primary dark bg */
    --adreams-dark-tint: #1A1A2E;
    /* dark section variation */

    /* ————————————————————————————————————————————————————————
       COLORS — Dark section overlays
       Use these on dark bg sections instead of inverting the palette
       ———————————————————————————————————————————————————————— */
    --border-dark: rgba(255, 255, 255, 0.08);
    /* subtle borders on dark */
    --text-dim: rgba(255, 255, 255, 0.38);
    /* secondary text on dark */
    --text-mute: rgba(255, 255, 255, 0.22);
    /* tertiary text on dark */

}