/*
 * My Lotus Homes — design tokens (web + print)
 * Source of truth for colours, type, spacing. Mirrors brand/tokens.json.
 * Use with brand/fonts/fonts.css. Print documents also load brand/print.css.
 */
:root {
    /* Colour — brand */
    --mlh-gold-700: #8c6820;   /* gold text on light backgrounds (AA 5:1 on paper) */
    --mlh-gold-500: #b4872d;   /* brand gold: logo, rules, buttons, large type */
    --mlh-gold-300: #d7ad53;   /* gold on dark green (AA 5:1 on forest) */
    --mlh-gold-100: #f3e6c4;   /* tints, highlights */
    --mlh-olive-600: #4b5a3a;  /* logo leaves + "Lotus" script */
    --mlh-forest-700: #2f432e; /* primary dark surface */
    --mlh-forest-900: #203321; /* deepest surface, footer */
    --mlh-sage-300: #b9c8b5;
    --mlh-sage-100: #d7ded6;

    /* Colour — neutrals */
    --mlh-ink: #263126;        /* body text */
    --mlh-muted: #667066;      /* secondary text (AA on paper and cream) */
    --mlh-sand: #e8e1d4;       /* lines, borders */
    --mlh-cream: #f7f3ea;      /* alt background */
    --mlh-paper: #fffdf9;      /* main background */
    --mlh-white: #ffffff;

    /* Colour — roles */
    --mlh-bg: var(--mlh-paper);
    --mlh-bg-alt: var(--mlh-cream);
    --mlh-bg-dark: var(--mlh-forest-700);
    --mlh-text: var(--mlh-ink);
    --mlh-text-muted: var(--mlh-muted);
    --mlh-text-on-dark: var(--mlh-cream);
    --mlh-accent: var(--mlh-gold-500);
    --mlh-accent-text: var(--mlh-gold-700);
    --mlh-accent-on-dark: var(--mlh-gold-300);
    --mlh-action: linear-gradient(90deg, #aa7b22, #d3aa50); /* primary button fill, white label */
    --mlh-line: var(--mlh-sand);

    /* Type — families */
    --mlh-font-display: 'Gilda Display', Georgia, 'Times New Roman', serif;
    --mlh-font-body: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
    --mlh-font-script: 'Parisienne', 'Snell Roundhand', cursive;

    /* Type — web scale (1rem = 16px) */
    --mlh-text-xs: 0.75rem;    /* 12 */
    --mlh-text-sm: 0.875rem;   /* 14 */
    --mlh-text-base: 1rem;     /* 16 */
    --mlh-text-md: 1.125rem;   /* 18 */
    --mlh-text-lg: 1.375rem;   /* 22 */
    --mlh-text-xl: 1.75rem;    /* 28 */
    --mlh-text-2xl: 2.25rem;   /* 36 */
    --mlh-text-3xl: 3rem;      /* 48 */
    --mlh-text-display: clamp(2.75rem, 6vw, 5.5rem);

    /* Type — print scale */
    --mlh-pt-caption: 7.5pt;
    --mlh-pt-body: 9.5pt;
    --mlh-pt-lead: 12pt;
    --mlh-pt-h3: 14pt;
    --mlh-pt-h2: 20pt;
    --mlh-pt-h1: 32pt;

    --mlh-leading-tight: 1.1;
    --mlh-leading-snug: 1.3;
    --mlh-leading-body: 1.65;
    --mlh-eyebrow-tracking: 0.28em; /* the logo tagline's wide spacing */

    /* Space — 4px base */
    --mlh-space-1: 4px;
    --mlh-space-2: 8px;
    --mlh-space-3: 12px;
    --mlh-space-4: 16px;
    --mlh-space-5: 24px;
    --mlh-space-6: 32px;
    --mlh-space-7: 48px;
    --mlh-space-8: 64px;
    --mlh-space-9: 96px;

    /* Shape */
    --mlh-radius-sm: 4px;
    --mlh-radius-md: 8px;
    --mlh-radius-lg: 16px;
    --mlh-radius-pill: 999px;
    --mlh-shadow: 0 18px 50px rgba(32, 51, 33, 0.12);
    --mlh-rule: 1px solid var(--mlh-line);
}

/* Shared text styles */
.mlh-display { font: 400 var(--mlh-text-display)/var(--mlh-leading-tight) var(--mlh-font-display); }
.mlh-eyebrow {
    font: 700 var(--mlh-text-xs)/1.2 var(--mlh-font-body);
    letter-spacing: var(--mlh-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--mlh-accent-text);
}
.mlh-script { font-family: var(--mlh-font-script); font-weight: 400; }