/* =========================================================================
   FILENAME: mortgage-advisors.css
   ROLE: Engine theme palette for the KnowYourProspect mortgage-advisors sector.
   SCOPE: Pure aesthetic paint for the pairwise engine overlay only.
          STRICTLY HAS NO STRUCTURAL LAYOUT RESPONSIBILITY.

   This intentionally mirrors standalone.css's token contract rather than
   kyp-palette.css's naming — engine-styling.css, pairwise-master.css, and
   buttons.css all expect these exact variable names regardless of which
   product is hosting the engine.
   ========================================================================= */

/* -------------------------------------------------------------------------
   LIGHT MODE (default)
   ------------------------------------------------------------------------- */
:root {
  /* --- App Frame Colors --- */
  --app-frame-bg: #FFFFFF;
  --page-bg: #FFFFFF;

  /* --- Surface Tokens --- */
  --surface-primary: #F8FAFC;
  --surface-secondary: #E2E8F0;
  --surface-tertiary: var(--kyp-color-surface-tertiary);
  --app-surface-bg: var(--kyp-app-surface-bg);
  --surface-border: rgba(148, 163, 184, 0.50);
  --radius: var(--kyp-radius);

  /* --- Text Tokens --- */
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #506680;
  --text-button: #F8FAFC;

  /* --- Action Buttons --- */
  --action-primary: var(--kyp-plum-800);
  --action-primary-hover: var(--kyp-plum-600);
  --action-primary-active: var(--kyp-plum-900);

  /* FLAIRS */
  --box-shadow-subtle: var(--kyp-shadow-subtle);
  --placeholder-primary: #CBD5E1;
  --placeholder-secondary: #94A3B8;
  --placeholder-accent: var(--kyp-gold-600);
  --action-accent: var(--kyp-gold-600);
}


/* -------------------------------------------------------------------------
   DARK MODE — follows system preference automatically
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* --- App Frame Colors --- */
    --app-frame-bg: #211219;
    --page-bg: #211219;

    /* --- Surface Tokens --- */
    --surface-primary: #2E1B26;
    --surface-secondary: #38222E;
    --surface-tertiary: var(--kyp-color-surface-tertiary);
    --app-surface-bg: var(--kyp-app-surface-bg);
    --surface-border: rgba(216, 184, 198, 0.25);

    /* --- Text Tokens --- */
    --text-primary: #EDE6E3;
    --text-secondary: #C3B3B8;
    --text-muted: #9C8A90;
    --text-button: #211219;

    /* --- Action Buttons --- */
    --action-primary: #D8B8C6;
    --action-primary-hover: #C9A277;
    --action-primary-active: var(--kyp-color-accent-active);

    /* FLAIRS */
    --box-shadow-subtle: var(--kyp-shadow-subtle);
    --placeholder-primary: #4A3540;
    --placeholder-secondary: #6B5D62;
    --placeholder-accent: #C9A277;
    --action-accent: #C9A277;
  }
}

/* -------------------------------------------------------------------------
   MANUAL OVERRIDE — set by the theme toggle via data-theme attribute
   These take priority over prefers-color-scheme when present.
   ------------------------------------------------------------------------- */
[data-theme="light"] {
  /* --- App Frame Colors --- */
  --app-frame-bg: #FFFFFF;
  --page-bg: #FFFFFF;

  /* --- Surface Tokens --- */
  --surface-primary: #F8FAFC;
  --surface-secondary: #E2E8F0;
  --surface-tertiary: var(--kyp-color-surface-tertiary);
  --app-surface-bg: var(--kyp-app-surface-bg);
  --surface-border: rgba(148, 163, 184, 0.50);
  --radius: var(--kyp-radius);

  /* --- Text Tokens --- */
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #506680;
  --text-button: #F8FAFC;

  /* --- Action Buttons --- */
  --action-primary: var(--kyp-plum-800);
  --action-primary-hover: var(--kyp-plum-600);
  --action-primary-active: var(--kyp-plum-900);

  /* FLAIRS */
  --box-shadow-subtle: var(--kyp-shadow-subtle);
  --placeholder-primary: #CBD5E1;
  --placeholder-secondary: #94A3B8;
  --placeholder-accent: var(--kyp-gold-600);
  --action-accent: var(--kyp-gold-600);
}


[data-theme="dark"] {
  --app-frame-bg: #211219;
  --page-bg: #211219;
  --surface-primary: #2E1B26;
  --surface-secondary: #38222E;
  --surface-tertiary: #4A3540;
  --app-surface-bg: #2A1922;
  --surface-border: rgba(216, 184, 198, 0.25);
  --text-primary: #EDE6E3;
  --text-secondary: #C3B3B8;
  --text-muted: #9C8A90;
  --text-button: #211219;
  --action-primary: #D8B8C6;
  --action-primary-hover: #C9A277;
  --action-primary-active: #B08968;
  --box-shadow-subtle: rgba(0, 0, 0, 0.35);
  --placeholder-primary: #4A3540;
  --placeholder-secondary: #6B5D62;
  --placeholder-accent: #C9A277;
  --action-accent: #C9A277;
}