/* ============================================================
   TheRoof Realty Theme — embed instances only (theroof.csoft.my)
   ============================================================
   Design standards supplied by TRR 2026-08-06:
     primary button colour #03A9F4, font "Helvetica Neue".
   Helvetica Neue ships only on Apple platforms — the stack below
   degrades to Helvetica/Arial elsewhere (flagged to TRR).
   Loaded alongside theme-csoft.css; these tokens win via
   [data-theme="theroof"] specificity.
   ============================================================ */

:root, [data-theme="theroof"] {
    /* TRR brand primitives */
    --trr-primary:      #03A9F4;
    --trr-primary-dark: #0288D1;
    --trr-primary-50:   #E1F5FE;
    --trr-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[data-theme="theroof"] {
    /* Map TRR brand onto the app's existing semantic tokens so the shared
       components (buttons, links, focus rings) pick it up without edits. */
    --brand-50:  #E1F5FE;
    --brand-100: #B3E5FC;
    --brand-200: #81D4FA;
    --brand-300: #4FC3F7;
    --brand-400: #29B6F6;
    --brand-500: #03A9F4;
    --brand-600: #039BE5;
    --brand-700: #0288D1;
    --brand-800: #0277BD;
    --brand-900: #01579B;

    --color-primary:       var(--trr-primary);
    --color-primary-hover: var(--trr-primary-dark);
    --btn-primary-bg:      var(--trr-primary);
    --btn-primary-bg-hover: var(--trr-primary-dark);

    font-family: var(--trr-font);
}

[data-theme="theroof"] body,
[data-theme="theroof"] .btn,
[data-theme="theroof"] button,
[data-theme="theroof"] input,
[data-theme="theroof"] select,
[data-theme="theroof"] textarea {
    font-family: var(--trr-font);
}

/* Primary buttons — TRR blue. NOTE: white-on-#03A9F4 is ~2.6:1, below WCAG AA;
   flagged to TRR 2026-08-06, applied as specified pending their preference. */
[data-theme="theroof"] .btn-primary,
[data-theme="theroof"] .e-btn.e-primary {
    background-color: var(--trr-primary);
    border-color: var(--trr-primary);
    color: #fff;
}

[data-theme="theroof"] .btn-primary:hover,
[data-theme="theroof"] .e-btn.e-primary:hover {
    background-color: var(--trr-primary-dark);
    border-color: var(--trr-primary-dark);
}

[data-theme="theroof"] a {
    color: var(--trr-primary-dark);
}